9 files changed, 18 insertions, 25 deletions
diff --git a/modern/src/map/MapDirection.js b/modern/src/map/MapDirection.js
index 7897cda7..2ccd508b 100644
--- a/modern/src/map/MapDirection.js
+++ b/modern/src/map/MapDirection.js
@@ -1,10 +1,9 @@
-import { useEffect } from 'react';
+import { useId, useEffect } from 'react';
 import { useAttributePreference } from '../common/util/preferences';
-
 import { map } from './core/MapView';
 
 const MapDirection = ({ position }) => {
-  const id = 'directions';
+  const id = useId();
 
   const iconScale = useAttributePreference('iconScale', 1);
 
diff --git a/modern/src/map/MapMarkers.js b/modern/src/map/MapMarkers.js
index 7101a5d3..2fbfceea 100644
--- a/modern/src/map/MapMarkers.js
+++ b/modern/src/map/MapMarkers.js
@@ -1,9 +1,8 @@
-import { useEffect } from 'react';
-
+import { useId, useEffect } from 'react';
 import { map } from './core/MapView';
 
 const MapMarkers = ({ markers }) => {
-  const id = 'markers';
+  const id = useId();
 
   useEffect(() => {
     map.addSource(id, {
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index 92e8de8d..e38e2694 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -1,6 +1,5 @@
-import { useCallback, useEffect } from 'react';
+import { useId, useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-
 import { map } from './core/MapView';
 import { getStatusColor } from '../common/util/formatter';
 import usePersistedState from '../common/util/usePersistedState';
@@ -9,7 +8,7 @@ import { findFonts } from './core/mapUtil';
 import { useAttributePreference } from '../common/util/preferences';
 
 const MapPositions = ({ positions, onClick, showStatus }) => {
-  const id = 'positions';
+  const id = useId();
   const clusters = `${id}-clusters`;
 
   const devices = useSelector((state) => state.devices.items);
diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js
index c2ef1d8e..d2d6827c 100644
--- a/modern/src/map/MapRoutePath.js
+++ b/modern/src/map/MapRoutePath.js
@@ -1,11 +1,11 @@
 import { useTheme } from '@mui/styles';
 import maplibregl from 'maplibre-gl';
-import { useEffect } from 'react';
+import { useId, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { map } from './core/MapView';
 
 const MapRoutePath = ({ positions }) => {
-  const id = 'replay';
+  const id = useId();
 
   const theme = useTheme();
 
diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js
index 3c48c788..bec8bde8 100644
--- a/modern/src/map/main/MapAccuracy.js
+++ b/modern/src/map/main/MapAccuracy.js
@@ -1,12 +1,11 @@
-import { useEffect } from 'react';
+import { useId, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import circle from '@turf/circle';
-
 import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 
 const MapAccuracy = () => {
-  const id = 'accuracy';
+  const id = useId();
 
   const theme = useTheme();
 
diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js
index 3dafa639..6cfe9b61 100644
--- a/modern/src/map/main/MapGeofence.js
+++ b/modern/src/map/main/MapGeofence.js
@@ -1,12 +1,11 @@
-import { useEffect } from 'react';
+import { useId, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-
 import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 import { findFonts, geofenceToFeature } from '../core/mapUtil';
 
 const MapGeofence = () => {
-  const id = 'geofences';
+  const id = useId();
 
   const theme = useTheme();
 
diff --git a/modern/src/map/main/MapLiveRoutes.js b/modern/src/map/main/MapLiveRoutes.js
index e98bea74..d0f67a73 100644
--- a/modern/src/map/main/MapLiveRoutes.js
+++ b/modern/src/map/main/MapLiveRoutes.js
@@ -1,5 +1,4 @@
-import { useEffect, useState } from 'react';
-
+import { useId, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
@@ -7,7 +6,7 @@ import { usePrevious } from '../../reactHelper';
 import { useAttributePreference } from '../../common/util/preferences';
 
 const MapLiveRoutes = () => {
-  const id = 'liveRoute';
+  const id = useId();
 
   const theme = useTheme();
 
diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js
index f3b4eea2..0d94ca15 100644
--- a/modern/src/map/main/PoiMap.js
+++ b/modern/src/map/main/PoiMap.js
@@ -1,6 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useId, useEffect, useState } from 'react';
 import { kml } from '@tmcw/togeojson';
-
 import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 import { useEffectAsync } from '../../reactHelper';
@@ -8,7 +7,7 @@ import { usePreference } from '../../common/util/preferences';
 import { findFonts } from '../core/mapUtil';
 
 const PoiMap = () => {
-  const id = 'poi';
+  const id = useId();
 
   const theme = useTheme();
 
diff --git a/modern/src/map/overlay/MapOverlay.js b/modern/src/map/overlay/MapOverlay.js
index ec51c7c9..85797d4b 100644
--- a/modern/src/map/overlay/MapOverlay.js
+++ b/modern/src/map/overlay/MapOverlay.js
@@ -1,10 +1,10 @@
-import { useEffect } from 'react';
+import { useId, useEffect } from 'react';
 import usePersistedState from '../../common/util/usePersistedState';
 import { map } from '../core/MapView';
 import useMapOverlays from './useMapOverlays';
 
 const MapOverlay = () => {
-  const id = 'overlay';
+  const id = useId();
 
   const mapOverlays = useMapOverlays();
   const [selectedMapOverlay] = usePersistedState('selectedMapOverlay');