Add zoom in on click

src/components/map/mapbox/layers/ClusterLayer.tsx

@@ -339,9 +339,6 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
         unclusterPointLayerMouseLeaveEventHandler
       );
       map?.on("mouseleave", clusterLayer, clusterLayerMouseLeaveEventHandler);
-
-      // If user click a cluster layer, zoom into it a bit
-      map?.on("click", clusterLayer, clusterLayerMouseClickEventHandler);
     };
 
     map?.once("load", createLayers);
@@ -363,7 +360,6 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
         unclusterPointLayerMouseLeaveEventHandler
       );
       map?.off("mouseleave", clusterLayer, clusterLayerMouseLeaveEventHandler);
-      map?.off("click", clusterLayer, clusterLayerMouseClickEventHandler);
 
       // Clean up resource when you click on the next spatial extents, map is
       // still working in this page.
@@ -388,6 +384,17 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
     // where you will add source and remove layer accidentally.
   }, [map]);
 
+  useEffect(() => {
+    const layerId = getLayerId(map?.getContainer().id);
+    const clusterLayer = getclusterLayerId(layerId);
+
+    // If user click a cluster layer, zoom into it a bit
+    map?.on("click", clusterLayer, clusterLayerMouseClickEventHandler);
+    return () => {
+      map?.off("click", clusterLayer, clusterLayerMouseClickEventHandler);
+    };
+  }, [map, clusterLayerMouseClickEventHandler]);
+
   useEffect(() => {
     addSpatialExtentsLayer();
 
@@ -410,7 +417,7 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
     return () => {
       map?.off("styledata", updateSource);
     };
-  }, [updateSource]);
+  }, [map, updateSource]);
 
   // Setup the event handler
   useEffect(() => {

src/components/map/mapbox/layers/GeojsonLayer.tsx

@@ -126,7 +126,7 @@ const GeojsonLayer: FC<GeojsonLayerProps> = ({ collection, setPhotos }) => {
         "fill-outline-color": "black",
       },
     });
-  }, [map, stringToColor, extent, collectionId]);
+  }, [map, extent, collectionId]);
 
   // This is use to handle base map change that set style will default remove all layer, which is
   // the behavior of mapbox, this useEffect, add the layer back based on user event