how to edit and then save a pre-loaded geojson ?

[agronomofiorentini]

Dear all,
I am pretty new to the react framework, and i am sorry if the question is easy or banal.

I am facing a problem in order to edit and save a geojson saved in a DB.
The problem arises when I press the icon to be able to edit the polygon. The error is as follows.

Cannot read properties of undefined (reading 'disable')
TypeError: Cannot read properties of undefined (reading 'disable')
    at NewClass._disableLayerEdit (http://localhost:3000/static/js/bundle.js:22799:559)
    at NewClass.eachLayer (http://localhost:3000/static/js/bundle.js:29247:16)
    at NewClass.removeHooks (http://localhost:3000/static/js/bundle.js:22750:40)
    at NewClass.disable (http://localhost:3000/static/js/bundle.js:28128:12)
    at NewClass.disable (http://localhost:3000/static/js/bundle.js:22736:167)
    at NewClass._save (http://localhost:3000/static/js/bundle.js:22707:85)
    at HTMLAnchorElement.handler (http://localhost:3000/static/js/bundle.js:25445:17)

This is the code that i am using.

import React, { useState, useEffect, useRef  } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Form, Button } from 'react-bootstrap';
import { MapContainer, TileLayer, LayersControl, GeoJSON, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';
import axios from 'axios';

import L from 'leaflet';

import 'leaflet-draw/dist/leaflet.draw.css';

function UpdateField() {
  const { fieldId } = useParams();
  const navigate = useNavigate(); 
  
  const featureGroupRef = useRef();

  const [fieldData, setFieldData] = useState({
    FieldName: '',
    Field: '',
    Centroid: ''
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`http://127.0.0.1:8000/field/${fieldId}/`);
        setFieldData({
          FieldName: response.data.properties.FieldName,
          Field: response.data,
          Centroid: response.data.properties.centroid
        });
      } catch (error) {
        console.error('Error fetching field data:', error);
      }
    };

    fetchData();
  }, [fieldId]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFieldData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleUpdateField = async () => {
    try {
      await axios.put(`http://127.0.0.1:8000/field/update/${fieldId}/`, fieldData);
      navigate('/field/'); // Use navigate instead of history.push for version 6
    } catch (error) {
      console.error('Error updating field:', error);
    }
  };

  return (
    <div>
      <h3>Edit Field</h3>
      <Form>
        <Form.Group controlId="fieldName">
          <Form.Label>Field Name</Form.Label>
          <Form.Control
            type="text"
            name="FieldName"
            value={fieldData.FieldName}
            onChange={handleInputChange}
          />
        </Form.Group>
        <br></br>
        {fieldData.Field && (
          <MapContainer center={[fieldData.Centroid[1], fieldData.Centroid[0]]} zoom={12} style={{ height: '500px', width: '100%', margin: 0, padding: 0 }}>
            <LayersControl position="topright">
              <LayersControl.Overlay name='Field'>
              </LayersControl.Overlay>
              <LayersControl.BaseLayer checked name="OpenStreetMap">
                  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' />
              </LayersControl.BaseLayer>
              <LayersControl.BaseLayer checked name="Satellite">
                  <TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" attribution='&copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' />
              </LayersControl.BaseLayer>
            </LayersControl>            
            <FeatureGroup ref={featureGroupRef}>
              <GeoJSON
                data={{
                  type: 'Feature',
                  geometry: {
                    type: 'Polygon',
                    coordinates: fieldData.Field.geometry.coordinates,
                  },
                  properties: fieldData.Field.properties,
                }}
                style={{ fillColor: 'blue', weight: 2, opacity: 1, color: 'blue', fillOpacity: 0.3 }}
              />
              <EditControl
                position="topleft"
                draw={{
                  polygon: false,
                  rectangle: false,
                  polyline: false,
                  circle: false,
                  marker: false,
                  circlemarker: false,
                  remove: false,
                }}
                edit={{
                  featureGroup: featureGroupRef.current,
                  remove: false,
                }}
                onEdited={(e) => {
                  // Handle editing event if needed
                  console.log('onEdited', e);
                }}
                onCreated={(e) => {
                  // Handle creation event if needed
                  console.log('onCreated', e);
                }}
                onDeleted={(e) => {
                  // Handle deletion event if needed
                  console.log('onDeleted', e);
                }}
              />
            </FeatureGroup>
          </MapContainer>
        )}
        <br></br>
        <Button variant="primary" onClick={handleUpdateField}>
          Update Field <i className="fas fa-edit"></i>
        </Button>
      </Form>
      <pre className='text-left'>{JSON.stringify(fieldData.Field, 0, 2)}</pre>
    </div>
  );
}

export default UpdateField;

and in order to allow you to reproduce the problem i will leave here below the geojson that i am using

{
  "id": 10,
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [
          12.962929727660208,
          43.003344681229635
        ],
        [
          12.998601419401503,
          43.02041552428384
        ],
        [
          13.026498513103363,
          42.99363561005481
        ],
        [
          12.988085104293889,
          42.9781470070833
        ],
        [
          12.962929727660208,
          43.003344681229635
        ]
      ]
    ]
  },
  "properties": {
    "FieldName": "ciao",
    "centroid": [
      12.994303646904392,
      42.99894066813375
    ]
  }
}

what am i doing wrong?