Creating a custom Leaflet control with React components

Solution for Creating a custom Leaflet control with React components
is Given Below:

Using leaflet 1.7.1, react 17.0.2, react-leaflet 3.1.0.

I am trying to create a custom Leaflet control in a React project starting from this discussion and using createControlComponent() function to do so.

So in my MyControl.js file I have:

import { createControlComponent } from '@react-leaflet/core'
import ownStyles from '../style/MyControl.module.css'
import { Container } from 'react-bootstrap'
import L from 'leaflet'

L.MyControl = L.Control.extend({
  onAdd: function (map) {
    return (
      <Container className={ownStyles.mainContainer}>
        My container!
      </Container>
    )
  },

  onRemove: function (map) {}
})

export const MyControl = createControlComponent(
  (props) => new L.MyControl(props)
)

and I use it in App.js with:

import { MyControl } from './components/MyControl'
import { MapContainer } from 'react-leaflet'

<MapContainer>
  <MyControl />
</MapContainer>

This configuration returns me the error Uncaught TypeError: el.className is undefined.

I tried to add/remove the className attribute both to/from the tags <MyControl /> and <Container /> without success.

One undesired solution found was not using React components within the Leaflet control, i.e.:

(...)
onAdd: function (map) {
    const retDiv = L.DomUtil.create('div')
    retDiv.innerHTML = 'A DIV THAT WORKS!'
    return retDiv
  },
(...)

So it seems that there is an incompatibility in the configuration of ‘React component inside custom Leaflet control’.

Am I missing something? Any workaround?

Or do we MUST use L.DomUtil objects to build custom Leaflet controls?