map:
import {
  APIProvider,
  Map,
  MapCameraChangedEvent,
  MapEvent,
} from '@vis.gl/react-google-maps'
import { FC, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { debounce } from 'lodash'
import ListIcon from '@mui/icons-material/List'
import FilterListIcon from '@mui/icons-material/FilterList'
import { useMediaQuery, Theme, Box, Button, Typography } from '@mui/material'
import CustomMarkers from './custom-markers/custom-markers'
import { useAppDispatch, useAppSelector } from '@/redux/hooks'
import calculateClosedRectangleCoordinates from '@/utils/calculateClosedRectangleCoordinates'
import useUpdateFarmDataBasedOnZoom from '@/utils/hooks/useUpdateFarmDataBasedOnZoom'
import { setSelectedLocation, setMapState } from '@/redux/globalFilters.slice'
import { styles } from '../../pages/map-page/map-page-style'
import CompassButton from '../map-components/campass-button/campass-button'
import { useLocation } from 'react-router-dom'
import useQueryLocation from '@/utils/hooks/useQueryLocation'
import { MAP_AREA_INPUT } from '@/utils/constants/constants'
import { Coordinate } from '@/utils/constants/interfaces'

export interface MapInfoWindowProps {
  data: {
    id: string
    title: string
    location: string
    tags: string[]
    img: string
    lat: number
    lng: number
  }
}
interface Position {
  lat: number
  lng: number
}

const MAX_ZOOM = 19
const MIN_ZOOM = 4
const DEFAULT_ZOOM = 12
export const CLUSTER_SWITCH_ZOOM_LEVEL = 10

const InteractiveMap: FC = () => {
  const location = useLocation()
  const [bounds, setBounds] = useState<Coordinate[]>([])

  const isMobile = useMediaQuery((theme: Theme) =>
    theme.breakpoints.down('tablet')
  )
  const isMobileOrTablet = useMediaQuery((theme: Theme) =>
    theme.breakpoints.down('desktop')
  )
  const navigate = useNavigate()
  const dispatch = useAppDispatch()

  const { storedMapState } = useAppSelector((state) => state.globalFilters)
  const { latitude, longitude } = location.state ?? useQueryLocation().location

  const setUserLocationAsCenter =
    location.state?.setUserLocationAsCenter ?? true

  const storedZoom = location.state
    ? location.state.zoom
    : storedMapState?.zoom ?? DEFAULT_ZOOM // default zoom level

  const [zoom, setZoom] = useState<number>(storedZoom)
  const [center, setCenter] = useState<Position>({
    lat: latitude,
    lng: longitude,
  })

  const { aggregatedFarmData, detailedFarmData, setFilter, isSuccess } =
    useUpdateFarmDataBasedOnZoom({ zoom, mapCoordinates: bounds })
  console.log('isSuccess', isSuccess)
  const onMapLoad = (mapEvent: MapEvent) => {
    setBounds(
      calculateClosedRectangleCoordinates(
        mapEvent.map.getBounds() as google.maps.LatLngBounds
      )
    )
  }
  const handleZoomChange = (ev: MapCameraChangedEvent) => {
    setZoom(ev.detail.zoom)
    if (ev.detail.center)
      setCenter({ lat: ev.detail.center.lat, lng: ev.detail.center.lng })
    const boundsLiteral = ev.detail.bounds
    if (boundsLiteral) {
      const filter = calculateClosedRectangleCoordinates(boundsLiteral)
      dispatch(
        setSelectedLocation({
          city_name: MAP_AREA_INPUT,
          latitude: ev.detail.center.lat,
          longitude: ev.detail.center.lng,
          view: filter,
        })
      )
      dispatch(setMapState({ zoom: ev.detail.zoom }))
      setFilter(filter)
    }
  }

  const handleDrag = (event: MapEvent) => {
    const bounds = event.map.getBounds()
    if (bounds) {
      const filter = calculateClosedRectangleCoordinates(bounds)
      if (event.map.getCenter() !== undefined) {
        setCenter({
          lat: event.map.getCenter()?.lat() as number,
          lng: event.map.getCenter()?.lng() as number,
        })
        dispatch(
          setSelectedLocation({
            city_name: MAP_AREA_INPUT,
            latitude: event.map.getCenter()?.lat() as number,
            longitude: event.map.getCenter()?.lng() as number,
            view: filter,
          })
        )
      }
      setFilter(filter)
    }
  }
  return (
    <Box id="mapContainer" style={{ width: '100%', height: '100%' }}>
      <APIProvider apiKey={import.meta.env.VITE_GOOGLEMAP_API_KEY}>
        <Map
          style={{ borderRadius: '16px' }}
          defaultZoom={storedZoom}
          defaultCenter={center}
          mapId={'ec57cbe629242726'}
          maxZoom={MAX_ZOOM}
          minZoom={MIN_ZOOM}
          onZoomChanged={debounce(handleZoomChange, 500)}
          onDragend={debounce(handleDrag, 500)}
          gestureHandling={'greedy'}
          clickableIcons={false}
          fullscreenControl={false}
          mapTypeControl={false}
          zoomControl={isMobileOrTablet ? false : true}
          streetViewControl={false}
          onTilesLoaded={onMapLoad}
        >
          {isSuccess &&
            (zoom <= CLUSTER_SWITCH_ZOOM_LEVEL ? (
              <CustomMarkers points={aggregatedFarmData}></CustomMarkers>
            ) : (
              <CustomMarkers points={detailedFarmData}></CustomMarkers>
            ))}
          {isSuccess &&
            (isMobile ? (
              <Box sx={styles.buttonContainer}>
                <Button sx={styles.mobileFilterContainer}>
                  <FilterListIcon sx={styles.mobileFilter} />
                </Button>
              </Box>
            ) : (
              <Box sx={styles.buttonContainer}>
                <Button
                  onClick={() => {
                    navigate('/farms')
                  }}
                >
                  <Typography
                    variant="paragraph-medium"
                    sx={styles.buttonContent}
                  >
                    <ListIcon />
                    Show List
                  </Typography>
                </Button>
              </Box>
            ))}
          <CompassButton setUserLocationAsCenter={setUserLocationAsCenter} />
        </Map>
      </APIProvider>
    </Box>
  )
}

export default InteractiveMap

useUpdateFarmDataBasedOnZoom:
import { useGetMapPageFarmsQuery } from '@/redux/apis/queryFarmsApi'
import { defaultLocation } from '@/utils/constants/constants'
import { useEffect, useState } from 'react'
import {
  Point,
  FullDetail,
} from '@/components/map/custom-markers/custom-markers'
import { useAppSelector } from '@/redux/hooks'
import { extractTagsFromActivities } from '../commonUtils'

type FarmData = Point | FullDetail

interface dataProps {
  zoom: number
  mapCoordinates: {
    latitude: number
    longitude: number
  }[]
}

const useUpdateFarmDataBasedOnZoom = (data: dataProps) => {
  const { zoom, mapCoordinates } = data
  /* zoom <= 10: only show aggregated points by <Cluster>*/
  const [aggregatedFarmData, setAggregatedFarmData] = useState<FarmData[]>([])
  /* zoom > 10: show single points with the effect of showing detailed farm info when hovering on it */
  const [detailedFarmData, setDetailedFarmData] = useState<FarmData[]>([])

  const selectedDate = useAppSelector(
    (state) => state.globalFilters.selectedDate
  )

  const [filter, setFilter] = useState<
    {
      latitude: number
      longitude: number
    }[]
  >([])

  useEffect(() => {
    setFilter(mapCoordinates)
  }, [mapCoordinates])

  const {
    data: farmsResult,
    isFetching,
    isSuccess,
  } = useGetMapPageFarmsQuery({
    range: filter,
    // TODO: update the hardcoded values to the actual selected values by adding the following product string
    //"fruit_apple||animal_cow"
    product: '',
    zoom: zoom,
    timeRange: {
      startDate: selectedDate.startDate,
      endDate: selectedDate.endDate,
    },
  })

  useEffect(() => {
    if (!isFetching) {
      if (zoom <= 10) {
        const farmData = processFarmDataToAggregated(farmsResult)
        setAggregatedFarmData(farmData)
      } else {
        const farmData = processFarmDataToDetailed(farmsResult)
        setDetailedFarmData(farmData)
      }
    }
  }, [isFetching])

  function processFarmDataToAggregated(farms: typeof farmsResult): FarmData[] {
    return (
      farms?.results.map((farm) => ({
        lat:
          parseFloat(farm.document.farm_address_geo_latitude as string) ||
          defaultLocation.latitude,
        lng:
          parseFloat(farm.document.farm_address_geo_longitude as string) ||
          defaultLocation.longitude,
        id: farm.document.farm_id,
      })) ?? []
    )
  }

  function processFarmDataToDetailed(farms: typeof farmsResult): FarmData[] {
    return (
      farms?.results?.map((farm, index) => {
        const {
          farm_id,
          farm_name = '',
          farm_address_full_address = '',
          farm_address_geo_latitude,
          farm_address_geo_longitude,
          farm_activities,
        } = farm.document
        const farmTags = extractTagsFromActivities(farm_activities)
        return {
          id: farm_id,
          title: farm_name,
          location: farm_address_full_address,
          tags: farmTags,
          img: `https://picsum.photos/300/600?${index + 1}`,
          lat:
            parseFloat(farm_address_geo_latitude as string) ||
            defaultLocation.latitude,
          lng:
            parseFloat(farm_address_geo_longitude as string) ||
            defaultLocation.longitude,
        }
      }) ?? []
    )
  }
  return { aggregatedFarmData, detailedFarmData, setFilter, isSuccess }
}

export default useUpdateFarmDataBasedOnZoom

I am not in strictMode, why "console.log('isSuccess', isSuccess)" printed for 5 times:
isSuccess true
isSuccess false
isSuccess true
isSuccess true
isSuccess true