react-leaflet-draw throwing error with GeoJSON

Question

i have a map built with react-leaflet. I am fetching an array of GeoJson, rendering them on the map as Feature (from the react-leaflet library as well) and try to load that into the map and make it editable with with the drawing control from react-leaflet-draw

import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
import "leaflet-defaulticon-compatibility";
import styles from "./map.module.scss";
import { MapContainer, TileLayer, GeoJSON, Popup, FeatureGroup, Marker } from "react-leaflet";
import DrawingController from "./DrawingController";
import { useMapContext } from "../MapContext";
import { useRouter } from "next/router";

const Map = ({ markers }: any) => {
  const { setMapRef } = useMapContext();
  const router = useRouter();

  return (
    <MapContainer
      center={[52.52, 13.405]}
      zoom={13}
      scrollWheelZoom={false}
      className={styles.mapContainer}
      ref={setMapRef}
      whenReady={() => {
        console.log("MAPLOAD")
      }}
    >
      {router.pathname === "/myPlaces" && markers && (
            <FeatureGroup >
              <Marker position={[50.5, 30.5]}>
                <Popup>Hello world</Popup>
              </Marker>
              <GeoJSON data={markers}/>
              <DrawingController/>
            </FeatureGroup>
      )}

      {router.pathname === "/home" && markers && <GeoJSON data={markers} />}

      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  );
};

export default Map;

Drawing Controller component looks like this

import { EditControl } from "react-leaflet-draw";
import "leaflet-draw/dist/leaflet.draw.css";
import { useMapContext } from "../MapContext";
import { useUserContext } from "../UserContext";

const DrawingController = () => {
  const { addMarker, drawnMarkers } = useMapContext();
  const { userObj } = useUserContext();

  return (
      <EditControl
        position="topright"
        edit={{
          remove: false,
        }}
        draw={{
          rectangle: false,
          circle: false,
          circlemarker: false,
          polyline: {
            showLength: true,
            metric: true,
          },
          polygon: {
            allowIntersection: false,
            drawError: {
              color: "red", 
              message: "<strong>That is a terrible polygon! Draw that again!",
            },
          },
        }}
        onCreated={(e) => {
          addMarker(e.layer, userObj);
        }}
      />
  );
};

export default DrawingController;

It throws an error stating

TypeError: Cannot read properties of undefined (reading 'enable') Call Stack NewClass._enableLayerEdit node_modules\leaflet-draw\dist\leaflet.draw.js (9:31399)

The single Marker that i also load into the Featuregroup works well with react-leaflet-draw so the issue seems to lie with the GeoJson. I have tried to convert the GeoJson first to Marker and add that to map but didnt change error message.

couldnt get it to work on codesandbox but git repo is here