Issue in edit control while navigating the routes

[munish12]

Here is my code import React, { useState } from "react"; import { MapContainer, TileLayer, GeoJSON, FeatureGroup ,Circle} from "react-leaflet"; import "leaflet/dist/leaflet.css"; import "leaflet-draw/dist/leaflet.draw.css"; import { EditControl } from "react-leaflet-draw"; import { Config } from "./ConfigUrl"; import "leaflet-draw"; const ConfigUrl = { url: Config.MAP_URL, }; const ReactLeafletMap = (props) => { const [center, setCenter] = React.useState({ lat: 33.7490, lng: -84.3880, }); const [geoJson, setGeoJson] = React.useState([]); const [_geoJson, _setGeoJson] = React.useState(null); const [error, setError] = React.useState(null); const zoom = 8.5; const MapRef = React.useRef();

const _onCreated = (e) => { // reset Error setError("");

let geojson = e.layer.toGeoJSON();

setGeoJson(geojson);

// checking if current drawn area lies inside or not
console.log((props.geoJson, geojson));

}; const _onEdited = (e) => { // const { // layers: { _layers }, // } = e; // Object.values(_layers).map(({ _leaflet_id, editing }) => { // setMapLayers((layers) => // layers.map((l) => // l.id === _leaflet_id // ? { ...l, latlngs: { ...editing.latlngs[0] } } // : l // ) // ); // }); }; const _onDeleted = (e) => { // const { // layers: { _layers }, // } = e; // Object.values(_layers).map(({ _leaflet_id }) => { // setMapLayers((layers) => layers.filter((l) => l.id !== _leaflet_id)); // }); };

return ( <MapContainer center={center} zoom={zoom} scrollWheelZoom={true} style={{ height: "400px" }} ref={MapRef}

<GeoJSON data={props.geoJson} style={{ color: "black" }} />

); };

export default ReactLeafletMap;

[ssanchezmarc]

https://github.com/alex3165/react-leaflet-draw/issues/127 other issue that seems to be related