Fix map

package.json

@@ -51,13 +51,13 @@
     "geodesy": "^2.4.0",
     "immer": "^10.0.2",
     "jszip": "^3.10.1",
-    "lucide-react": "^0.274.0",
+    "lucide-react": "^0.279.0",
     "mapbox-gl": "npm:empty-npm-package@^1.0.0",
     "maplibre-gl": "3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.46.1",
-    "react-map-gl": "^7.1.5",
+    "react-map-gl": "7.2.0-beta.1",
     "react-qrcode-logo": "^2.9.0",
     "rfc4648": "^1.5.2",
     "tailwind-merge": "^1.14.0",
@@ -67,9 +67,9 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.6",
-    "@types/chrome": "^0.0.245",
+    "@types/chrome": "^0.0.246",
     "@types/geodesy": "^2.2.3",
-    "@types/node": "^20.5.9",
+    "@types/node": "^20.6.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/w3c-web-serial": "^1.0.3",
@@ -86,6 +86,6 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-environment": "^1.1.3",
-    "vite-plugin-pwa": "^0.16.4"
+    "vite-plugin-pwa": "^0.16.5"
   }
 }

src/pages/Map.tsx

@@ -15,8 +15,8 @@ import {
   ZoomOutIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-import { Layer, Map as MapGL, Marker, Source, useMap } from "react-map-gl";
+import { Layer, Map as Marker, Source, useMap } from "react-map-gl";
-import maplibre from "react-map-gl/maplibre";
+import MapGL from "react-map-gl/maplibre";
 
 export const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
@@ -119,7 +119,6 @@ export const MapPage = (): JSX.Element => {
           // }}
 
           // @ts-ignore
-          mapLib={maplibre}
           attributionControl={false}
           renderWorldCopies={false}
           maxPitch={0}