diff --git a/src/layers/src/arc-layer/arc-layer.ts b/src/layers/src/arc-layer/arc-layer.ts
index f37a41e81c..78c66e2868 100644
--- a/src/layers/src/arc-layer/arc-layer.ts
+++ b/src/layers/src/arc-layer/arc-layer.ts
@@ -285,6 +285,7 @@ export default class ArcLayer extends Layer {
         ? [
             new DeckArcLayer({
               ...this.getDefaultHoverLayerProps(),
+              visible: defaultLayerProps.visible,
               data: [hoveredObject],
               widthScale,
               getSourceColor: this.config.highlightColor,
diff --git a/src/layers/src/cluster-layer/cluster-layer.ts b/src/layers/src/cluster-layer/cluster-layer.ts
index b60027ae2e..ff61512d3c 100644
--- a/src/layers/src/cluster-layer/cluster-layer.ts
+++ b/src/layers/src/cluster-layer/cluster-layer.ts
@@ -115,12 +115,15 @@ export default class ClusterLayer extends AggregationLayer {
         ...gpuFilter.filterValueUpdateTriggers
       }
     };
+
+    const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
+
     const {_filterData: filterData, ...clusterData} = data;
     const hoveredObject = this.hasHoveredObject(objectHovered);
 
     return [
       new DeckGLClusterLayer({
-        ...this.getDefaultDeckLayerProps(opts),
+        ...defaultLayerProps,
         ...clusterData,
         filterData,
 
@@ -149,6 +152,7 @@ export default class ClusterLayer extends AggregationLayer {
         ? [
             new ScatterplotLayer<{radius: number}>({
               id: `${this.id}-hovered`,
+              visible: defaultLayerProps.visible,
               data: [hoveredObject],
               getFillColor: this.config.highlightColor,
               getRadius: d => d.radius,
diff --git a/src/layers/src/geojson-layer/geojson-layer.ts b/src/layers/src/geojson-layer/geojson-layer.ts
index be7be1e7cc..593699062d 100644
--- a/src/layers/src/geojson-layer/geojson-layer.ts
+++ b/src/layers/src/geojson-layer/geojson-layer.ts
@@ -457,11 +457,13 @@ export default class GeoJsonLayer extends Layer {
             : {})
         }
       }),
+      // hover layer
       ...(hoveredObject && !visConfig.enable3d
         ? [
             new DeckGLGeoJsonLayer({
               ...this.getDefaultHoverLayerProps(),
               ...layerProps,
+              visible: defaultLayerProps.visible,
               wrapLongitude: false,
               data: [hoveredObject],
               getLineWidth: data.getLineWidth,
diff --git a/src/layers/src/grid-layer/grid-layer.ts b/src/layers/src/grid-layer/grid-layer.ts
index cb1af39ef5..7327dc79b9 100644
--- a/src/layers/src/grid-layer/grid-layer.ts
+++ b/src/layers/src/grid-layer/grid-layer.ts
@@ -115,6 +115,7 @@ export default class GridLayer extends AggregationLayer {
   renderLayer(opts) {
     const {data, objectHovered, mapState} = opts;
 
+    const defaultAggregationLayerProps = this.getDefaultAggregationLayerProp(opts);
     const zoomFactor = this.getZoomFactor(mapState);
     const {visConfig} = this.config;
     const cellSize = visConfig.worldUnitSize * 1000;
@@ -122,7 +123,7 @@ export default class GridLayer extends AggregationLayer {
 
     return [
       new EnhancedGridLayer({
-        ...this.getDefaultAggregationLayerProp(opts),
+        ...defaultAggregationLayerProps,
         ...data,
         wrapLongitude: false,
         cellSize
@@ -133,6 +134,7 @@ export default class GridLayer extends AggregationLayer {
         ? [
             new GeoJsonLayer({
               ...this.getDefaultHoverLayerProps(),
+              visible: defaultAggregationLayerProps.visible,
               wrapLongitude: false,
               data: [
                 pointToPolygonGeo({
diff --git a/src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts b/src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts
index 05a19ebfc8..e3224ecd81 100644
--- a/src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts
+++ b/src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts
@@ -339,10 +339,12 @@ export default class HexagonIdLayer extends Layer {
           }
         }
       }),
+      // hover layer
       ...(hoveredObject && !config.sizeField
         ? [
             new GeoJsonLayer({
               ...this.getDefaultHoverLayerProps(),
+              visible: defaultLayerProps.visible,
               data: [idToPolygonGeo(hoveredObject)],
               getLineColor: config.highlightColor,
               lineWidthScale: DEFAULT_LINE_SCALE_VALUE * zoomFactor,
diff --git a/src/layers/src/hexagon-layer/hexagon-layer.ts b/src/layers/src/hexagon-layer/hexagon-layer.ts
index feecf08abd..9bf23246bd 100644
--- a/src/layers/src/hexagon-layer/hexagon-layer.ts
+++ b/src/layers/src/hexagon-layer/hexagon-layer.ts
@@ -123,6 +123,8 @@ export default class HexagonLayer extends AggregationLayer {
 
   renderLayer(opts) {
     const {data, objectHovered, mapState} = opts;
+
+    const defaultAggregationLayerProps = this.getDefaultAggregationLayerProp(opts);
     const zoomFactor = this.getZoomFactor(mapState);
     const {visConfig} = this.config;
     const radius = visConfig.worldUnitSize * 1000;
@@ -130,7 +132,7 @@ export default class HexagonLayer extends AggregationLayer {
 
     return [
       new EnhancedHexagonLayer({
-        ...this.getDefaultAggregationLayerProp(opts),
+        ...defaultAggregationLayerProps,
         ...data,
         wrapLongitude: false,
         radius
@@ -141,6 +143,7 @@ export default class HexagonLayer extends AggregationLayer {
         ? [
             new GeoJsonLayer({
               ...this.getDefaultHoverLayerProps(),
+              visible: defaultAggregationLayerProps.visible,
               wrapLongitude: false,
               data: [
                 hexagonToPolygonGeo(hoveredObject, {}, radius * visConfig.coverage, mapState)
diff --git a/src/layers/src/icon-layer/icon-layer.ts b/src/layers/src/icon-layer/icon-layer.ts
index 0cca0a4598..58be079c19 100644
--- a/src/layers/src/icon-layer/icon-layer.ts
+++ b/src/layers/src/icon-layer/icon-layer.ts
@@ -376,12 +376,14 @@ export default class IconLayer extends Layer {
             extensions
           }),
 
+          // hover layer
           ...(hoveredObject
             ? [
                 // @ts-expect-error SvgIconLayerProps needs getIcon Field
                 new SvgIconLayer({
                   ...this.getDefaultHoverLayerProps(),
                   ...layerProps,
+                  visible: defaultLayerProps.visible,
                   data: [hoveredObject],
                   parameters,
                   getPosition: data.getPosition,
diff --git a/src/layers/src/point-layer/point-layer.ts b/src/layers/src/point-layer/point-layer.ts
index 3bd59d6e90..488d457e58 100644
--- a/src/layers/src/point-layer/point-layer.ts
+++ b/src/layers/src/point-layer/point-layer.ts
@@ -382,6 +382,7 @@ export default class PointLayer extends Layer {
             new ScatterplotLayer({
               ...this.getDefaultHoverLayerProps(),
               ...layerProps,
+              visible: defaultLayerProps.visible,
               data: [hoveredObject],
               getLineColor: this.config.highlightColor,
               getFillColor: this.config.highlightColor,