chore(eslint): make react-hooks/exhaustive-deps rule as an error

app/javascript/components/shared/maplibre/MapLibre.tsx

@@ -5,7 +5,8 @@ import React, {
   useEffect,
   useMemo,
   ReactNode,
-  createContext
+  createContext,
+  useCallback
 } from 'react';
 import maplibre, { Map, Style, NavigationControl } from 'maplibre-gl';
 
@@ -37,11 +38,14 @@ export function MapLibre({ children, header, footer, layers }: MapLibreProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [map, setMap] = useState<Map | null>();
 
-  const onStyleChange = (style: Style) => {
-    if (map) {
-      map.setStyle(style);
-    }
-  };
+  const onStyleChange = useCallback(
+    (style: Style) => {
+      if (map) {
+        map.setStyle(style);
+      }
+    },
+    [map]
+  );
   const { style, ...mapStyleProps } = useStyle(layers, onStyleChange);
 
   useEffect(() => {
@@ -56,7 +60,7 @@ export function MapLibre({ children, header, footer, layers }: MapLibreProps) {
         setMap(map);
       });
     }
-  }, []);
+  }, [map, style, isSupported]);
 
   if (!isSupported) {
     return (

app/javascript/components/shared/maplibre/hooks.ts

@@ -12,16 +12,22 @@ import { useMapLibre } from './MapLibre';
 
 export function useFitBounds() {
   const map = useMapLibre();
-  return useCallback((bbox: LngLatBoundsLike) => {
-    map.fitBounds(bbox, { padding: 100 });
-  }, []);
+  return useCallback(
+    (bbox: LngLatBoundsLike) => {
+      map.fitBounds(bbox, { padding: 100 });
+    },
+    [map]
+  );
 }
 
 export function useFlyTo() {
   const map = useMapLibre();
-  return useCallback((zoom: number, center: [number, number]) => {
-    map.flyTo({ zoom, center });
-  }, []);
+  return useCallback(
+    (zoom: number, center: [number, number]) => {
+      map.flyTo({ zoom, center });
+    },
+    [map]
+  );
 }
 
 export function useEvent(eventName: string, callback: EventListener) {
@@ -104,7 +110,7 @@ export function useStyle(
     [styleId, enabledLayers]
   );
 
-  useEffect(() => onStyleChange(style), [style]);
+  useEffect(() => onStyleChange(style), [onStyleChange, style]);
 
   return { style, layers, setStyle, setLayerEnabled, setLayerOpacity };
 }