How initialize the polygons on the map then edit it.

Nobody has claimed this yet.

The code below tries to add a predefined polygons and loads it into map so I can edit it. I have used map.on('load'....) but still get error:
```
Uncaught TypeError: Cannot read properties of undefined (reading 'get')
```

```
'use client'
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import { useControl, type ControlPosition, type MapRef } from "react-map-gl/maplibre";
import { FeatureCollection } from 'geojson';
import { useRef } from 'react';

export type DrawControlProps = ConstructorParameters[0] & {
position?: ControlPosition;
onCreate?: (evt: MapboxDraw.DrawCreateEvent) => void;
onUpdate?: (evt: MapboxDraw.DrawUpdateEvent) => void;
onDelete?: (evt: MapboxDraw.DrawDeleteEvent) => void;
};

// @ts-ignore
MapboxDraw.constants.classes.CONTROL_BASE = "maplibregl-ctrl";
// @ts-ignore
MapboxDraw.constants.classes.CONTROL_PREFIX = "maplibregl-ctrl-";
// @ts-ignore
MapboxDraw.constants.classes.CONTROL_GROUP = "maplibregl-ctrl-group";

const preloadedFeatures: FeatureCollection = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[-97.23839195565238, 49.96781104119992],
[-97.23923240023636, 49.8362686108012],
[-97.02407858673101, 49.831931896639674],
[-97.04508970133088, 49.96835162714311],
[-97.23839195565238, 49.96781104119992],
],
],
},
properties: { name: 'Winnipeg Rectangle' },
id: 'winnipeg-rectangle',
},
],
};

const DrawControl: React.FC = (props: DrawControlProps) => {
const drawRef = useRef(null); // Store Draw Instance

useControl(
() => {
drawRef.current = new MapboxDraw({ ...props });
return drawRef.current;
},
({ map }: { map: MapRef }) => {
if (!drawRef.current) return;
const draw = drawRef.current;

if (props.onCreate) map.on("draw.create", props.onCreate);
if (props.onUpdate) map.on("draw.update", props.onUpdate);
if (props.onDelete) map.on("draw.delete", props.onDelete);

map.on("load", () => {
console.log("on map load");
if (draw && preloadedFeatures) {
drawRef.current.add(preloadedFeatures);
//console.log("all features", draw.getAll());
}
});
},
({ map }: { map: MapRef }) => {
if (!drawRef.current) return;
const draw = drawRef.current;

if (props.onCreate) map.off("draw.create", props.onCreate);
if (props.onUpdate) map.off("draw.update", props.onUpdate);
if (props.onDelete) map.off("draw.delete", props.onDelete);
},
{
position: props.position,
}
);

return null;
};

export default DrawControl;
```

Start by reproducing the error with the provided DrawControl component, focusing on the useControl setup and the map's load handler. Check how the MapboxDraw instance is initialized before preloadedFeatures are added. Done means the predefined polygon loads into the map and remains editable without the undefined-property error.

Written by the indexing model from the issue text.