Google Maps API Marker Clusterer show a dot instead of the numbers of markers inside the cluster using nextjs

I'm trying to do make a map with some POI and everything works fine except when I want to add a Marker Clusterer. In fact, I can see the cluster and interact with it, but instead of showing the number of makers inside the clusterer, it just shows a dot... Image of my current webapp.

I think the problems is here because I'm using JS instead of TS. So I tried to modify the code in the tutorial of google maps (https://developers.google.com/codelabs/maps-platform/maps-platform-101-react-js#0) but I may have made a mistake...

Also, here's my code:

import {
  APIProvider,
  Map,
  AdvancedMarker,
  Pin,
  useMap,
} from "@vis.gl/react-google-maps";
import { MarkerClusterer, ClusterIconStyle } from "@googlemaps/markerclusterer";

export default function MapInterface({ setTableView }) {
  //------------- POLYGONS DATA -------------
  const encode = require("geojson-polyline").encode;
  const regSimpData = regSimp.features;
  const encodedRegSimp = regSimpData.map((reg) => encode(reg.geometry));

  const tableButtonClickHandler = () => {
    setTableView(true);
  };

  //------------- DATA -------------

  const initialData = [
    { key: "operaHouse", location: { lat: -33.8567844, lng: 151.213108 } },
    { key: "tarongaZoo", location: { lat: -33.8472767, lng: 151.2188164 } },
    { key: "manlyBeach", location: { lat: -33.8209738, lng: 151.2563253 } },
    { key: "hyderPark", location: { lat: -33.8690081, lng: 151.2052393 } },
    { key: "theRocks", location: { lat: -33.8587568, lng: 151.2058246 } },
    { key: "circularQuay", location: { lat: -33.858761, lng: 151.2055688 } },
    { key: "harbourBridge", location: { lat: -33.852228, lng: 151.2038374 } },
    { key: "kingsCross", location: { lat: -33.8737375, lng: 151.222569 } },
    { key: "botanicGardens", location: { lat: -33.864167, lng: 151.216387 } },
    { key: "museumOfSydney", location: { lat: -33.8636005, lng: 151.2092542 } },
    { key: "maritimeMuseum", location: { lat: -33.869395, lng: 151.198648 } },
    {
      key: "kingStreetWharf",
      location: { lat: -33.8665445, lng: 151.1989808 },
    },
    { key: "aquarium", location: { lat: -33.869627, lng: 151.202146 } },
    { key: "darlingHarbour", location: { lat: -33.87488, lng: 151.1987113 } },
    { key: "barangaroo", location: { lat: -33.8605523, lng: 151.1972205 } },
  ];

  //------------- MARKERS -------------
  const BordeauxMarkers = ({ pois }) => {
    const map = useMap();
    const [markers, setMarkers] = useState({});
    const clusterer = useRef(null);

    // Initialize MarkerClusterer, if the map has changed
    useEffect(() => {
      if (!map) return;
      if (!clusterer.current) {
        clusterer.current = new MarkerClusterer({
          map: map,
        });
      }
    }, [map]);

    // Update markers, if the markers array has changed
    useEffect(() => {
      if (!clusterer.current) return;
      clusterer.current.clearMarkers();
      clusterer.current.addMarkers(Object.values(markers));
    }, [markers]);

    const setMarkerRef = (marker, key) => {
      if (marker && markers[key]) return;
      if (!marker && !markers[key]) return;

      setMarkers((prev) => {
        if (marker) {
          return { ...prev, [key]: marker };
        } else {
          const newMarkers = { ...prev };
          delete newMarkers[key];
          return newMarkers;
        }
      });
    };

    console.log(markers);

    return (
      <>
        {pois.map((poi) => (
          <AdvancedMarker
            key={poi.key}
            position={poi.location}
            ref={(marker) => setMarkerRef(marker, poi.key)}
          >
            <Pin
              background={"#FBBC04"}
              glyphColor={"#000"}
              borderColor={"#000"}
            />
          </AdvancedMarker>
        ))}
      </>
    );
  };

  //------------- CLUSTERS -------------

  return (
    <>
      <Flex position={"relative"} bgColor={"transparent"}>
        <Flex h="850px" w="vw" position={"absolute"} top={0} left={0}>
          <APIProvider
            apiKey={"APIKEY"}
            onLoad={() => console.log("Maps API has loaded.")}
          >
            <Map
              defaultZoom={6}
              defaultCenter={{ lat: 46.757285, lng: 2.2329292 }}
              mapId="MAP ID"
              onCameraChanged={(ev) =>
                console.log(
                  "camera changed:",
                  ev.detail.center,
                  "zoom:",
                  ev.detail.zoom
                )
              }
            >
              <BordeauxMarkers pois={initialData} />
              <Polygon encodedPaths={encodedRegSimp[0].coordinates} />
              <Polygon encodedPaths={encodedRegSimp[1].coordinates} />
              <Polygon encodedPaths={encodedRegSimp[2].coordinates} />
              <Polygon encodedPaths={encodedRegSimp[3].coordinates} />
              <Polygon encodedPaths={encodedRegSimp[4].coordinates} />
              <Polygon encodedPaths={encodedRegSimp[5].coordinates} />
              <Polygon encodedPaths={encodedRegSimp[6].coordinates[0]} />
              <Polygon encodedPaths={encodedRegSimp[7].coordinates[0]} />
              <Polygon encodedPaths={encodedRegSimp[8].coordinates[0]} />
              <Polygon encodedPaths={encodedRegSimp[9].coordinates[0]} />
              <Polygon encodedPaths={encodedRegSimp[10].coordinates} />
              <Polygon encodedPaths={encodedRegSimp[11].coordinates[0]} />
              <Polygon encodedPaths={encodedRegSimp[12].coordinates} />
            </Map>
          </APIProvider>
        </Flex>
        <Flex w="80%"></Flex>
        <Flex justifyContent={"end"} w="full" marginX="2%" marginY="2%">
          <Group attached={true}>
            <Button variant={"solid"} onClick={tableButtonClickHandler}>
              Table
            </Button>
            <Button variant={"solid"} disabled>
              Map
            </Button>
          </Group>
        </Flex>
      </Flex>
    </>
  );
}

I don't really don't know what's wrong because my code seems the same as the one in the tutorial, except it's in JS. I tried to modify the render but it didn't change anything and I have watch other tutorials but that didn't help me. Also, I didn't really get how the ref tag works in the AdvancedMarker component...

Thanks in advance!