title: How to toggle a rectangle grid using react-leaflet's LayerControl?
body: <p>I want to show or hide a grid of rectangles (the overlay) over a map (the base layer).</p>
  <p>I'm using the react Leaflet layers control : <a href="https://react-leaflet.js.org/docs/en/components#layerscontrol" rel="nofollow noreferrer">doc</a></p>
  <p>Problem : My grid shows all the time even if I uncheck the check box</p>
  <p>My grid :</p>
  <p><a href="https://i.stack.imgur.com/fkZAH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fkZAH.png" alt="grid picture" /></a></p>
  <pre><code>class Grid extends MapControl {
      createLeafletElement(props) {
          const { 
            leaflet: { map },
          } = props;
  
          const minLng = -4.89;  
      const minLat = 41.29;  
      const maxLng = 9.65;   
      const maxLat = 51.22
  
      const nbColumn = 10;
      const nbRow = 10;
      const rectWidth  = maxLng - minLng;
      const rectHeight = maxLat - minLat;
  
      const incrLat  = rectHeight  / nbColumn;
      const incrLng = rectWidth / nbRow;
      let column = 0;
      let lngTemp = minLng;
      let latTemp = minLat;
  
          let rect;
          const arrRect = [];
          while (column &lt; nbColumn) {
            let row = 0;
            latTemp = minLat;
            while (row &lt; nbRow) {
              const cellBounds = [[latTemp, lngTemp], [latTemp + incrLat, lngTemp + incrLng]];
              rect = L.rectangle(cellBounds, {color: &quot;#1EA0AA&quot;, weight: 1}).addTo(map);
              arrRect.push(rect);
              latTemp += incrLat; 
              row += 1;
            }
            lngTemp += incrLng;
            column += 1;
          }
          return rect;
      }
  }
  </code></pre>
  <p>In my leaflet component :</p>
  <pre><code>class Leaflet extends Component {
     ...
  render() {
    return (
        &lt;Map 
           &lt;LayersControl&gt;
              &lt;LayersControl.BaseLayer name=&quot;Open Street Map&quot; checked=&quot;true&quot;&gt;
                  &lt;TileLayer attribution='&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; 
                             contributors'
                             url={this.state.url}
                   /&gt;
              &lt;/LayersControl.BaseLayer&gt;
  
              &lt;LayersControl.Overlay name=&quot;Grid1&quot;&gt;
                 &lt;LayerGroup&gt;
                    &lt;Grid /&gt;     
                &lt;/LayerGroup&gt;
              &lt;/LayersControl.Overlay&gt;
        &lt;/LayersControl&gt;
  </code></pre>