how to draw shapes in react-leaflet v3

Question

Do you have any idea about implementing the draw functionality to react-leafletV3? I have added an event listener but it is not working and reacting to anything.

  useEffect(() => {
    if (!map) return;

    map.addEventListener("mousemove", function (event) {
      setCoords({ lat: event.latlng.lat, lng: event.latlng.lng });
    });

    map.on("draw:drawstart", function (event) {
      console.log("event here", event);
    });

    const drawControl = new L.Control.Draw({
      position: "topleft",
    });
    drawControl.addTo(map);

    const leftLayer = L.tileLayer(
      layers[leftLayerIndex].url,
      layerOptions
    ).addTo(map);

    const rightLayer = L.tileLayer(
      layers[rightLayerIndex].url,
      layerOptions
    ).addTo(map);

    const sbs = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
    setSideBySide(sbs);
  }, [map]);

  useEffect(() => {
    if (sideBySide) {
      sideBySide.setLeftLayers(
        L.tileLayer(layers[leftLayerIndex].url, layerOptions).addTo(map)
      );
    }
  }, [leftLayerIndex, rightLayerIndex, sideBySide]);

Answer 1

This is the code that worked for me. I added an event listener that listens to the created layer and after creating the layer I added the feature group layer. I have mention that this part is required as I have commented in the options object.

      edit: {
        featureGroup: editableLayers, //REQUIRED!!
      }

  useEffect(() => {
    if (!map) return;

    map.addEventListener("mousemove", function (event) {
      setCoords({ lat: event.latlng.lat, lng: event.latlng.lng });
    });

    const editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);

    const options = {
      position: "topleft",
      draw: {
        polyline: false,
        polygon: false,
        rectangle: {
          shapeOptions: {
            clickable: false,
            color: "dodgerblue",
          },
        },
      },
      edit: {
        featureGroup: editableLayers, //REQUIRED!!
      },
    };

    const drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);

    map.on(L.Draw.Event.CREATED, function (e) {
      var type = e.layerType,
        layer = e.layer;

      if (type === "marker") {
        layer.bindPopup("A popup!");
      }

      editableLayers.addLayer(layer);
    });

    const leftLayer = L.tileLayer(
      layers[leftLayerIndex].url,
      layerOptions
    ).addTo(map);

    const rightLayer = L.tileLayer(
      layers[rightLayerIndex].url,
      layerOptions
    ).addTo(map);

    const sbs = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
    setSideBySide(sbs);
  }, [map]);