4 files changed, 8 insertions, 12 deletions
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();