React-map-gl cluster array is empty - reactjs

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