Mapbox Cluster缩放时无法拆分为单个标记问题求助

我使用react-map-gl实现Mapbox集群功能，目前能显示集群内的标记数量，但缩放地图时，集群无法拆分为单个标记展示。使用的React Mapbox库为visgl/react-map-gl。

以下是相关代码：

useEffect(() => {
const points = alleArtikel.map((artikel) => ({
  type: "Feature",
  properties: {
    cluster: false,
    artikelId: artikel._id,
    name: artikel.name,
    beschreibung: artikel.beschreibung,
    lng: artikel.long,
    lat: artikel.lat,
    bild: artikel.bild,
    userId: artikel.userId,
  },
  geometry: {
    type: "Point",
    coordinates: [parseFloat(artikel.long), parseFloat(artikel.lat)],
  },
}));
setPoints(points);
}, [alleArtikel]);

useEffect(() => {
supercluster.load(points);
setClusters(supercluster.getClusters(bounds, zoom));
}, [points, zoom, bounds]);

useEffect(() => {
if (mapRef.current) {
  setBounds(mapRef.current.getMap().getBounds().toArray().flat());
}
}, [mapRef?.current]);


         {clusters?.map((artikel) => {
          const { cluster: isCluster, point_count } = artikel.properties;
          const [longitude, latitude] = artikel.geometry.coordinates;
          if (isCluster) {
            return (
              <Marker
                key={artikel.id}
                longitude={longitude}
                latitude={latitude}
                onClick={() => setShowPopup(true)}
              >
                <div
                  className="cluster-marker"
                  style={{
                    width: `${13 + (point_count / points.length) * 20}px`,
                    height: `${13 + (point_count / points.length) * 20}px`,
                  }}
                  onClick={() => {
                    const zoom = Math.min(
                      supercluster.getClusterExpansionZoom(artikel.id),
                      10
                    );
                    mapRef?.current.flyTo({
                      center: [longitude, latitude],
                      zoom,
                      speed: 1,
                    });
                  }}
                >
                  {point_count}
                </div>
              </Marker>
            );
          }

          return (
            <Marker
              key={artikel.properties.artikelId}
              longitude={longitude}
              latitude={latitude}
            >
              <Box sx={{ position: "realtive" }}>
                <Tooltip title={artikel.properties.beschreibung}>
                  <img
                    src={artikel.properties.bild}
                    width={40}
                    height={40}
                  />
                </Tooltip>

                {showPopup && (
                  <Popup
                    closeOnClick={false}
                    closeButton={true}
                    longitude={longitude}
                    latitude={latitude}
                    anchor="bottom"
                    onClose={() => setShowPopup(false)}
                    style={{ position: "absolute", top: -40 }}
                  >
                    <Stack direction="column">
                      <Box>
                        <img
                          src={artikel.properties.bild}
                          style={{ maxWidth: 200 }}
                        ></img>
                      </Box>
                      <Box>
                        <Typography variant="body2" align="center">
                          {artikel.art}
                        </Typography>
                      </Box>
                      <Box>
                        <Typography variant="body1" align="center">
                          {artikel.name}
                        </Typography>
                      </Box>
                      <Box>
                        <Button variant="contained" fullWidth>
                          anfragen
                        </Button>
                      </Box>
                    </Stack>
                  </Popup>
                )}
              </Box>
            </Marker>
          );
        })}

地图初始加载状态：

即使放大到最大程度，集群仍未拆分：

非常感谢您的帮助！

内容的提问来源于stack exchange，提问作者Captai-N