Draw Polygon example TS error [Bug]

Description

No overload matches this call. Overload 1 of 3, '(type: keyof MapEventType, listener: (ev: (MapboxEvent<undefined> | ErrorEvent | MapContextEvent | MapDataEvent | ... 5 more ... | MapWheelEvent) & EventData) => void): Map', gave the following error. Argument of type '"draw.create"' is not assignable to parameter of type 'keyof MapEventType'. Overload 2 of 3, '(type: string, listener: (ev: any) => void): Map', gave the following error. Argument of type '((evt: { features: object[]; }) => void) | undefined' is not assignable to parameter of type '(ev: any) => void'. Type 'undefined' is not assignable to type '(ev: any) => void'.ts(2769)

No overload matches this call. Overload 1 of 3, '(type: keyof MapEventType, listener: (ev: (MapboxEvent<undefined> | ErrorEvent | MapContextEvent | MapDataEvent | ... 5 more ... | MapWheelEvent) & EventData) => void): Map', gave the following error. Argument of type '"draw.delete"' is not assignable to parameter of type 'keyof MapEventType'. Overload 2 of 3, '(type: string, listener: (ev: any) => void): Map', gave the following error. Argument of type '((evt: { features: object[]; }) => void) | undefined' is not assignable to parameter of type '(ev: any) => void'. Type 'undefined' is not assignable to type '(ev: any) => void'.ts(2769)

No overload matches this call. Overload 1 of 3, '(type: keyof MapEventType, listener: (ev: (MapboxEvent<undefined> | ErrorEvent | MapContextEvent | MapDataEvent | ... 5 more ... | MapWheelEvent) & EventData) => void): Map', gave the following error. Argument of type '"draw.delete"' is not assignable to parameter of type 'keyof MapEventType'. Overload 2 of 3, '(type: string, listener: (ev: any) => void): Map', gave the following error. Argument of type '((evt: { features: object[]; }) => void) | undefined' is not assignable to parameter of type '(ev: any) => void'. Type 'undefined' is not assignable to type '(ev: any) => void'.ts(2769)

Example comes from here: https://github.com/visgl/react-map-gl/tree/7.0-release/examples/draw-polygon

Expected Behavior

No response

Steps to Reproduce

import MapboxDraw from '@mapbox/mapbox-gl-draw';
import type { ControlPosition, MapRef } from 'react-map-gl';
import { useControl } from 'react-map-gl';


type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
  position?: ControlPosition;

  onCreate?: (evt: { features: object[] }) => void;
  onUpdate?: (evt: { features: object[]; action: string }) => void;
  onDelete?: (evt: { features: object[] }) => void;
};

export default function DrawControl(props: DrawControlProps) {
  useControl<MapboxDraw>(
    () => new MapboxDraw(props),
    ({ map }: { map: MapRef }) => {
      map.on('draw.create', props.onCreate);
      map.on('draw.update', props.onUpdate);
      map.on('draw.delete', props.onDelete);
    },
    ({ map }: { map: MapRef }) => {
      map.off('draw.create', props.onCreate);
      map.off('draw.update', props.onUpdate);
      map.off('draw.delete', props.onDelete);
    },
    {
      position: props.position,
    },
  );

  return null;
}

DrawControl.defaultProps = {
  onCreate: () => {},
  onUpdate: () => {},
  onDelete: () => {},
};

Environment

• Framework version: "react-map-gl": "^7.0.21",
• Map library: "mapbox-gl": "^2.12.0", "@mapbox/mapbox-gl-draw": "^1.3.0"
• Browser: Google Chrome - latest
• OS: Windows 11 - latest
• Additional libs: "@types/mapbox-gl": "^2.7.10", "@types/mapbox__mapbox-gl-draw": "^1.3.3",

Logs

No response

Start with the examples/draw-polygon entry point and the DrawControl code shown in the issue. Check the react-map-gl, mapbox-gl, and Mapbox Draw type definitions to trace the event overload mismatch, then run the example's TypeScript checks. Done means the draw.create, draw.update, and draw.delete handlers type-check without overload or undefined-listener errors.