whenever drawing an polygon or circle or anything the drawn item is getting doubled

[ambitkar]

one item is getting drawn from the map itself and one item is overlapping from my state.
here is my code

return (

<MapContainer
style={{
height: "100vh",
width: "100vw",
}}
center={[13.008164257208236, 77.75066171174294]}
zoom={20}
scrollWheelZoom={true}
ref={mapRef}
doubleClickZoom={false}
>
{/* */}


<LayersControl.BaseLayer name="Open Street Map">

</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Google Map">

</LayersControl.BaseLayer>

      <LayersControl.BaseLayer checked name="Google Map Satellite">
        <LayerGroup>
          <TileLayer
            attribution="Google Maps Satellite"
            url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
          />
          <TileLayer url="https://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}" />
        </LayerGroup>
      </LayersControl.BaseLayer>
    </LayersControl>
    <FeatureGroup ref={drawnPolygonsRef} >
      <EditControl
        position="topright"
        onCreated={(e) => {
          if (e.layerType === "polygon") {
            handlePolygonCreated(e);
          } else if (e.layerType === "polyline") {
            handleLineCreated(e);
          } else if (e.layerType === "circle") {
            handleCircleCreated(e);
          }
        }}
        onEdited={handleEditedPolygons}
        onEditStart={handleEditStart}
        onDeleted={handleDeleteFeatures}
        draw={{
          rectangle: false,
          circle: true,
          circlemarker: false,
          polyline: true,
          polygon: true,
          marker: false,
        }}
        edit={{ edit: true }}
      />
     
      {drawnPolygon?.map((a: any, i: number) => (
        <Polygon
          key={i}
          positions={a.coordinates[0].map((row: any) => [row[1], row[0]])}
          pathOptions={{ color: "green" }}
          eventHandlers={{
            click: onClickPolygon,
            mouseover: onMouseOverPolygon,
            mouseout: onMouseOutPolygon,
          }}
        >
          <Popup>
            <div style={{ display: "flex" }}>
              <div>icon</div>
              <div>
                <p>Area</p>
                <p>{calculatePolygonArea(turf.polygon(a.coordinates)).toFixed(4)} Ha</p>
              </div>
              <div>Edit icon</div>
            </div>
          </Popup>
        </Polygon>
      ))}

      
    </FeatureGroup>
  </MapContainer>
</div>

);

[LinirZamir]

Having the same issue. Is there any solution to this yet?

[nirmaanlabs]

@ambitkar @LinirZamir can you put this code in live or codesandbox ?