Enable edit polygon on click in leaflet maps

Question

I'm using below function to get geography data from backend as json and then draw polygon using leaflet:

function drawAreas() {
    $.ajax({
    type: "POST",
    url: "MAP_GeographicalAreas.aspx/GetGeographicalArea",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    success: function (response) {
        var json = JSON.parse(response.d);
        var drawnItems = new L.FeatureGroup();

        json.forEach(function (record, index) {

            var layer = L.geoJSON(record);
            layer.addTo(drawnItems);

            layer.on('click', function (event) {
                // I want to make polygon editable here...
            });          
        });
        map.addLayer(drawnItems);
    },
    failure: function (response) {
        alert("saveNew failure:", response.d);
    },
    error: function (response) {
        alert("saveNew error:", response + response.d);
    }
});
}

Also on form load I prepare the map using these codes:

function initLeafletMap() {

L.tileLayer('http://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(map);

const mapDiv = document.getElementById("map");

const resizeObserver = new ResizeObserver(() => {
    map.invalidateSize();
});

resizeObserver.observe(mapDiv);


drawnItems = L.featureGroup().addTo(map);

map.addControl(new L.Control.Draw({
    edit: {
        featureGroup: drawnItems,
        poly: {
            allowIntersection: false
        }
    },
    draw: {
        polygon: {
            allowIntersection: false,
            showArea: true
        }
    }
}));


map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;

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

    drawnItems.addLayer(layer);
});

map.on(L.Draw.Event.EDITED, function (event) {
    var layers = event.layers;

    layers.eachLayer(function (layer) {

        var poly = layer.toGeoJSON();
        shape_for_db = JSON.stringify(poly);
        //console.log(shape_for_db);
    });
});
}

How to make polygon editable when user clicks on it?

I tried solutions suggested in these links:

How to allow only one feature/polygon to be edited at a time with Leaflet?

Add existing leaflet polygons to an existing leaflet layer