React Mapbox-GL draggable marker component

draggable-marker.component.tsx

import MapboxGL from 'mapbox-gl';
import React, { useEffect, useRef, useState, MutableRefObject } from 'react';

type CoordinatesType = [number, number];

interface DraggableMarkerProps {
  coordinates: CoordinatesType;

  map?: MapboxGL.Map;
  children?: any;
}

export const DraggableMarkerComponent = ({ coordinates, map, children }: DraggableMarkerProps) => {
  const element = useRef() as MutableRefObject<HTMLDivElement>;
  const [marker, setMarker] = useState<MapboxGL.Marker>();

  useEffect(() => {
    if (marker && map) {
      marker.setLngLat(coordinates).addTo(map);
    }

    return () => {
      if (marker) {
        marker.remove();
      }
    }
  }, [marker, map]);

  useEffect(() => {
    if (element.current !== null && map) {
      setMarker(new MapboxGL.Marker({
        draggable: true, element: element.current
      }));
    }
  }, [element, map]);

  return (<div ref={element}>{children}</div>);
}