leaflet-draw delete problem "Cannot read properties of undefined " - reactjs

Question

I'm trying to work with leaflet and leaflet-draw on my react project but i keep getting an error message when I click on delete in the draw pannel even thaugh the edit button and event work fine
here is the code `
const script = document.createElement("script");
script.src =
"https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js";
script.async = true;
document.body.appendChild(script);
var map = L.map("map").setView([36.8299552, 10.3194016], 14);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors',
}).addTo(map);
// FeatureGroup is to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
marker: false,
rectangle: false,
circle: false,
polyline: false,
circlemarker: false,
},
edit: {
featureGroup: drawnItems,
},
});
map.addControl(drawControl);
//draw event
map.on(L.Draw.Event.CREATED, (e) => {
var type = e.layerType,
layer = e.layer;
// Do whatever else you need to. (save to db; add to map etc)
map.addLayer(layer);
drawnItems.addLayer(layer);
if (type == "polygon") {
add_microzone_service({ _latlngs: layer._latlngs });
}
});
map.on("draw:edited", function (e) {
var layers = e.layers;
layers.eachLayer(function (layer) {
console.log(layer.options._id);
});
});
map.on("draw:deleted", function (e) {
var layers = e.layers;
layers.eachLayer(function (layer) {
console.log("deleted");
});
});
and here is the error I'm getting:
Can someone help?