Unified location and optimization stack for

package.json
...
    "@types/mapbox-gl":"2.7.1",
    "mapbox-gl":"2.8.2"
}App.tsx 

import * as React from "react";
import mapboxgl, { Map, NavigationControl } from "mapbox-gl";
const MapboxGL: React.FunctionComponent = (props) => {
  const mapContainerRef = React.useRef<HTMLDivElement>(null);  
  mapboxgl.accessToken = "api_tracking_key_maploads";
  React.useEffect(() => {
    if (mapContainerRef.current != null) {
      const map = new Map({
        container: mapContainerRef.current,
        style:
          "mapbox://styles/mapbox/streets-v11",
          center: [-83.1264, 40.11959],
          zoom: 12
        });
    }
  }, []);return (
    <div
      ref={mapContainerRef}
      style={{
        width: "100vw",
        height: "100vh"
      }}
    />
  );
};export default MapboxGL;