diff --git a/src/components/Container.jsx b/src/components/Container.jsx
index ca4320d83..c5744db4f 100644
--- a/src/components/Container.jsx
+++ b/src/components/Container.jsx
@@ -49,8 +49,8 @@ export default function Container() {
           ref.attributionControl.setPrefix(attributionPrefix || '')
           ref.on('moveend', setLocationZoom)
           ref.on('zoomend', setLocationZoom)
-          useMapStore.setState({ map: ref })
         }
+        useMapStore.setState({ map: ref })
       }}
       zoom={zoom}
       zoomControl={false}
diff --git a/src/components/Layers.jsx b/src/components/Layers.jsx
index bd8a5cd07..29883da3a 100644
--- a/src/components/Layers.jsx
+++ b/src/components/Layers.jsx
@@ -24,7 +24,7 @@ export function ControlledZoomLayer() {
         zoom.remove()
       }
     }
-  }, [navSetting])
+  }, [navSetting, map])
 
   return null
 }
@@ -35,21 +35,25 @@ export function ControlledLocate() {
     (state) => state.settings.navigationControls === 'leaflet',
   )
 
+  const lc = React.useMemo(
+    () =>
+      control.locate({
+        position: 'bottomright',
+        icon: 'fas fa-crosshairs',
+        keepCurrentZoomLevel: true,
+        setView: 'untilPan',
+      }),
+    [],
+  )
+
   React.useEffect(() => {
     if (navSetting) {
-      const lc = control
-        .locate({
-          position: 'bottomright',
-          icon: 'fas fa-crosshairs',
-          keepCurrentZoomLevel: true,
-          setView: 'untilPan',
-        })
-        .addTo(map)
+      lc.addTo(map)
       return () => {
         lc.remove()
       }
     }
-  }, [navSetting])
+  }, [navSetting, map, lc])
 
   return null
 }