useControl<MapboxDraw>, MapContextValue and v7.1.5

[Wiser-ly]

Hello all,

First, let me thank you for this package which really helped me to build what I wanted in React 👍

I had the bug of Layer not showing on zoom bigger than 6, as described in this ticket . I updated from version 7.0.25 to 7.1.5 and, allelouia, the bug was fixed.

However, since I updated, I have an issue in my call of the useControl.
I haved implemented it the way it is described in the "draw polygon" example which is in 7.1.0:

type MapControlDrawProps = ConstructorParameters<typeof MapboxDraw>[0] & {
	position?: ControlPosition;
	data: FeatureCollection;
	onCreate: (evt: { features: object[] }) => void;
	onUpdate: (evt: { features: object[]; action: string }) => void;
	onDelete: (evt: { features: object[] }) => void;
};

export default function MapControlDraw(props: MapControlDrawProps) {
	var draw = new MapboxDraw({
		// other draw options here
		...props,
		styles: styles,
	});

	const [mapRef, setMapRef] = useState<MapRef | undefined>();

	useControl<MapboxDraw>(
		() => draw,
		({ map }: { map: MapRef }) => {
			map.on("draw.create", props.onCreate);
			map.on("draw.update", props.onUpdate);
			map.on("draw.delete", props.onDelete);
			setMapRef(map);
		},
		({ map }: { map: MapRef }) => {
			map.off("draw.create", props.onCreate);
			map.off("draw.update", props.onUpdate);
			map.off("draw.delete", props.onDelete);
			setMapRef(undefined);
		},
		{
			position: props.position,
		}
	);
	return null;
}
const noop = () => {};
MapControlDraw.defaultProps = {
	onCreate: noop,
	onUpdate: noop,
	onDelete: noop,
};

This generates the following error at compilation:

ERROR in src/components/map/MapControlDraw.ts:31:3
TS2345: Argument of type '({ map }: { map: MapRef; }) => void' is not assignable to parameter of type '(context: MapContextValue<MapInstance>) => void'.
  Types of parameters '__0' and 'context' are incompatible.
    Type 'MapContextValue<MapInstance>' is not assignable to type '{ map: MapRef; }'.
      Types of property 'map' are incompatible.
        Type 'MapRef<MapInstance>' is not assignable to type 'MapRef'.
          Type 'MapRef<MapInstance>' is not assignable to type '{ getMap(): Map; }'.
            The types returned by 'getMap()' are incompatible between these types.
              Type 'MapInstance' is missing the following properties from type 'Map': getBounds, getMaxBounds, setMaxBounds, setMinZoom, and 73 more.
    29 |        useControl<MapboxDraw>(
    30 |                () => draw,
  > 31 |                ({ map }: { map: MapRef }) => {
       |                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    32 |                        map.on("draw.create", props.onCreate);
    33 |                        map.on("draw.update", props.onUpdate);
    34 |                        map.on("draw.delete", props.onDelete);

I didn't have this error in version 7.0.25

I don't have much experience with your package, so maybe I am implementing this in a wrong way.
I have searched if anyone posted the same issue, I haven't found it ; sorry if i missed it.

Can you help?

[Wiser-ly]

Of course, it is after posting that I found an easy solution:

useControl<MapboxDraw>(
		() => draw,
		({ map }) => {
			map.on("draw.create", props.onCreate);
			map.on("draw.update", props.onUpdate);
			map.on("draw.delete", props.onDelete);
			setMapRef(map as MapRef);
		},
		({ map }) => {
			map.off("draw.create", props.onCreate);
			map.off("draw.update", props.onUpdate);
			map.off("draw.delete", props.onDelete);
			setMapRef(undefined);
		},
		{
			position: props.position,
		}
	);

I leave it for anyone who has the same issue.
It might be better to update the example though.