changed imports to remove legacy

src/common/MapGL.tsx

@@ -3,7 +3,7 @@ import { Beenhere } from "@mui/icons-material";
 import { useThemeType } from "hooks";
 import moment from "moment";
 import React, { useEffect, useState } from "react";
-import Map, { Marker } from "react-map-gl/mapbox-legacy";
+import Map, { Marker } from "react-map-gl/mapbox";
 
 const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;
 

src/maps/MapBase.tsx

@@ -33,7 +33,7 @@ import { GeometryMapping, shapeFromCoords } from "models/GeometryMapping";
 import { FeatureCollection, Feature } from "geojson";
 import DrawController from "./mapControllers/drawController";
 //import { Geometry } from "geojson";
-import Map, { MapRef, Marker, MarkerDragEvent } from "react-map-gl/mapbox-legacy";
+import Map, { MapRef, Marker, MarkerDragEvent } from "react-map-gl/mapbox";
 import { getDistanceUnit } from "utils";
 import { MapMouseEvent } from "mapbox-gl";
 import { makeStyles } from "@mui/styles";

src/maps/mapControllers/Geocoder.tsx

@@ -1,4 +1,4 @@
-import { ControlPosition, useMap } from "react-map-gl/mapbox-legacy";
+import { ControlPosition, useMap } from "react-map-gl/mapbox";
 import MapboxGeocoder, { Result } from "@mapbox/mapbox-gl-geocoder";
 import { useEffect, useState } from "react";
 

src/maps/mapControllers/drawController.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useMap } from "react-map-gl/mapbox-legacy";
+import { useMap } from "react-map-gl/mapbox";
 import { FeatureCollection } from "geojson";
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 

src/maps/mapLayers/geoMapLayer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Layer, Source } from "react-map-gl/mapbox-legacy";
+import { Layer, Source } from "react-map-gl/mapbox";
 import { FeatureCollection } from "geojson";
 
 interface Props {

src/maps/mapMarkers/Markers.tsx

@@ -5,7 +5,7 @@ import { useMobile } from "hooks";
 import { clone } from "lodash";
 import { pond } from "protobuf-ts/pond";
 import React, { useCallback, useEffect, useState } from "react";
-import { Marker } from "react-map-gl/mapbox-legacy";
+import { Marker } from "react-map-gl/mapbox";
 
 //interface for markers
 export interface MarkerData {

tsconfig.app.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "baseUrl": "src",
-    "target": "ES6",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES6", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,