How to save shape drawing by leaflet after submit page

Question

I create page with meta box in wordpress . The idea is to create post type with fields and integrate leaflet map on it. I draw shape on leaflet map then after submit page , the polygone created is deleted . Any idea to do this that save polygone created

<input type="hidden" name="address_pickup" class="address_pickup" />
<div id="map"></div></td>

<script>

var map = L.map('map').setView([51.505, -0.09], 13);
       
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

   var drawnItems = new L.FeatureGroup();
            map.addLayer(drawnItems);

            var drawControlFull = new L.Control.Draw({
                draw: {
                    polyline: false,
                },
                edit: {
                    featureGroup: drawnItems
                }
            });
            var drawControlEditOnly = new L.Control.Draw({
                edit: {
                    featureGroup: drawnItems
                },
                draw: false
            });
            map.addControl(drawControlFull);

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

                var data = layer.getLatLngs()[0];
                jQuery('.address_pickup').val(data);
             
                drawControlFull.remove(map);
                drawControlEditOnly.addTo(map)
            });
            map.on(L.Draw.Event.DELETED, function(e) {
            if (drawnItems.getLayers().length === 0){
                    drawControlEditOnly.remove(map);
                    drawControlFull.addTo(map);
                };
            });
</script>