React-map-gl cluster array is empty

Question

I'm using the user-supercluster library to portray clusters on my map. I've upgraded React-map-gl to the newest version. The map shows up but I cannot get my clusters or markers to show up. When I console the cluster array it's completely empty.

When I console log the points, the data is there. I'm not sure what is the issue.

import React, { useRef } from "react";
import Map, {
  Marker,
  FullscreenControl,
  NavigationControl,
} from "react-map-gl";
import HotelsQueryContext from "@Src/routes/Hotels/HotelsQueryContext";
import { useSelector } from "react-redux";
import { hotelsSelectors } from "@Src/redux/rootSelectors";
import useSupercluster from "use-supercluster";
import HotelMarker from "./HotelMarker";
import HotelCardWeb from "../../Web/components/HotelCardWeb";
import HotelCardPhone from "../../Phone/components/HotelCardPhone";
import "mapbox-gl/dist/mapbox-gl.css";
import "./Map.scss";


function HotelMap() {
  const mapRef = useRef();
  const hotelsQuery = React.useContext(HotelsQueryContext);
  const filteredHotels = useSelector(hotelsSelectors.getHotelsFilteredList);
  const [viewport, setViewport] = React.useState({
    latitude: parseFloat(hotelsQuery.lat),
    longitude: parseFloat(hotelsQuery.lon),
    zoom: 11.3,
  });

  const [selectedHotel, setSelectedHotel] = React.useState(null);

  //Covert filtered hotels to geojson data objects
  const points = filteredHotels.map((hotel) => ({
    type: "Feature",
    properties: {
      cluster: false,
      hotel_id: hotel.access_hotel_id,
      category: hotel.name,
    },
    geometry: {
      type: "Point",
      coordinates: [hotel.location.lon, hotel.location.lat],
    },
  }));

  const bounds = mapRef.current
    ? mapRef.current.getMap().getBounds().toArray().flat()
    : null;

  const { clusters, supercluster } = useSupercluster({
    points,
    bounds,
    zoom: viewport.zoom,
    options: { radius: 100, maxZoom: 20, minPoints: 9 },
  });

  

  //Handles zoom when user clicks on cluster
  const clusterZoom = (clusterID, latitude, longitude) => {
    mapRef.current?.flyTo({ cener: [longitude, latitude], duration: 2000 });
    const expansionZoom = Math.min(
      supercluster.getClusterExpansionZoom(clusterID),
      20
    );
    setViewport({
      ...viewport,
      latitude,
      longitude,
      zoom: expansionZoom,
       transitionInterpolator: new FlyToInterpolator({
         speed: 2,
       }),
       transitionDuration: "auto",
    });
  };

  console.log({ clusters });
  return (
    <div className="searchResults--map-wrapper">
      <div className="Map">
        <Map
          initialViewState={{
            ...viewport,
          }}
          mapStyle={process.env.REACT_APP_MAPBOX_STYLE_URL}
          mapboxAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
          onMove={(e) => setViewport(e.viewState)}
          onClick={() => setSelectedHotel(null)}
          style={{
            width: "100%",
            height: "100%",
          }}
           ref={mapRef}
        >
        

          {clusters.map((cluster, idx) => {
            const hotel = filteredHotels.find(
              (el) => el.access_hotel_id === cluster.properties.hotel_id
            );
            const [longitude, latitude] = cluster.geometry.coordinates;
            const { cluster: isCluster, point_count } = cluster.properties;
            if (isCluster) {
              return (
                <Marker
                  key={cluster.id}
                  latitude={latitude}
                  longitude={longitude}
                >
                  <div
                    className="Map-clusterMarker"
                    onClick={() => clusterZoom(cluster.id, latitude, longitude)}
                  >
                    {point_count} hotels
                  </div>
                </Marker>
              );
            }
            return (
              hotel && (
                <HotelMarker
                  key={hotel.access_hotel_id}
                  hotel={hotel}
                  selectedHotel={selectedHotel}
                  setSelectedHotel={setSelectedHotel}
                />
              )
            );
          })}
          <div className="Map-fullScreenCtrl">
            <FullscreenControl />
          </div>
          <div className="Map-navigationCtrl">
            <NavigationControl showCompass={false} />
          </div>
        </Map>
      </div>
    </div>
  );
}

export default HotelMap;

```React