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" }} />

<EditControl
position="topright"
onCreated={_onCreated}
onEdited={_onEdited}
onDeleted={_onDeleted}
// draw={{
// circle: false,
// polyline: true,
// }}
/>



);
};

export default ReactLeafletMap;

[ssanchezmarc]

#127 other issue that seems to be related