save/load leaflet.draw and use editing/delete buttons

[CORN-EZ]

I've looked into similar questions, but apparently I'm missing something (https://github.com/Leaflet/Leaflet.draw/issues/398, https://github.com/Leaflet/Leaflet.draw/issues/364, https://github.com/Leaflet/Leaflet.draw/issues/187, https://github.com/Leaflet/Leaflet.draw/issues/253 https://stackoverflow.com/questions/53463078/leaflet-draw-cannot-read-property-enable-of-undefined-adding-control-to-geoj https://stackoverflow.com/questions/24018630/how-to-save-a-completed-polygon-points-leaflet-draw-to-mysql-table)

When I create a figure, I attach a bindpopup to it with a button that saves the figure in the database.

I have a layer, activating which I request saved figures from the database, they are successfully loaded, drawn, I place them in drawitems, but at the same time I do not have the ability to edit newly added layers

I DON'T UNDERSTAND T_T

async function saveText(layerId) {
    var layer = drawnItems.getLayer(layerId);
    var textareaValue = document.querySelector('.leaflet-popup-content textarea').value;
    var type = layer instanceof L.Marker ? 'Point' : 'Polygon';
    var coordinates = type === 'Point' ? layer.getLatLng() : layer.getLatLngs();

    var shape = layer.toGeoJSON()
    var shape_for_db = JSON.stringify(shape);

    var data = {
        type: type,
        coordinate: shape_for_db,
        comment: textareaValue,
    };

    fetch(`${http}://${IP}:/mark/save-mark/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
}

function view_mark(date) {
    const apiUrl = `${http}://${IP}:/mark/`;
    fetch(apiUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error(` ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            addMarkersToMap(data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

async function addMarkersToMap(data) {
    data.forEach(item => {
        const coordinates = JSON.parse(item.coordinate);
        if (coordinates) {
            if (item.type === 'Point') {
                L.geoJSON(coordinates, {
                pointToLayer: function (feature, latlng) {
                    return L.marker(latlng, {icon: myicon});
                    }
                }).addTo(drawnItems)
                .bindPopup(item.comment);
            } else if (item.type === 'Polygon') {
                    L.geoJSON(coordinates,option).addTo(drawnItems)
                    .bindPopup(item.comment);
            }
        }
    });
}

[CORN-EZ]

i also used this code to make sure i don't have groups

function addNonGroupLayers(sourceLayer, targetGroup) {
  if (sourceLayer instanceof L.LayerGroup) {
    sourceLayer.eachLayer(function(layer) {
      addNonGroupLayers(layer, targetGroup);
    });
  } else {
    targetGroup.addLayer(sourceLayer);
  }
}

[CORN-EZ]

The problem was solved, if I understood correctly, the problem was that I had previously written data to the database in a different format

and he didn't want to build next