How to get the leaves from a cluster using react mapbox gl?

I have tried on example from Youtube tutorial "Mapbox Marker clustering". I want to add getLeaves method to grab all of the items inside the cluster in order to visualize a popup with each details for every individual marker.

console.log(cluster.id) returns id of each cluster id, but

const items = supercluster.getLeaves(cluster.id) gets an error that "Error: No cluster with the specified id."

Is it possible to use getLeaves method with react mapbox gl?

For this react code and link to youtube video.

--

import React, { useState, useRef } from 'react';
import useSwr from "swr";
import ReactMapGL, { Marker, FlyToInterpolator, NavigationControl } from 'react-map-gl';
import useSupercluster from 'use-supercluster';
import Supercluster from 'supercluster';
import './App.css'


const fetcher = (...args) => fetch(...args).then(response => response.json());

export default function App(){

    //navigation control 
    const navStyle = {
        position: "absolute",
        top: 0,
        right: 10,
        padding: "10px"
      };

//set up map
    const [viewport, setViewport ] = useState({
        latitude: 52.6376,
        longitude: -1.135171,
        width: "100vw",
        height: "100vh",
        zoom: 12
    });
    const mapRef = useRef();

    // load and prepare data
    const url =
    "https://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2019-10";



    const {data, error} = useSwr(url, fetcher);
    const crimes = data && !error ? data.slice(0, 200) : [];
    const points = crimes.map(crime => ({
        type: "Feature",
        properties: { 
            cluster: false, 
            crimeId: crime.id, 
            category: crime.category 
        },
        geometry: {
          type: "Point",
          coordinates: [
            parseFloat(crime.location.longitude),
            parseFloat(crime.location.latitude)
          ]
        }
      }));


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

    // get clusters
    const {clusters, supercluster } = useSupercluster({
        points,
        zoom: viewport.zoom,
        bounds,
        options: { radius: 75, maxZoom: 20 }
    });




    // return map
    return(
        <div>
    <ReactMapGL 
    {...viewport} 
    maxZoom={20}
    mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN123}
    mapStyle="mapbox://styles/shunsukeito/ckaanisi33g1k1ipowgmg8tdd"

    onViewportChange={newViewport => {
        setViewport({...newViewport});
    }}
    ref={mapRef}
    >
        <div className="nav" style={navStyle}>
          <NavigationControl
          />
          </div>


    {clusters.map(cluster => {
        const [longitude, latitude] = cluster.geometry.coordinates;
        const {
            cluster: isCluster,
            point_count: pointCount
             } = cluster.properties;


             //where I get the error!!!
            console.log(cluster.id)
            const items = supercluster.getLeaves(cluster.id)

        if (isCluster){
            return(
                <Marker key={cluster.id} latitude={latitude} longitude={longitude}>
                    <div className="cluster-marker" 
                    style={{
                        width: '${10 + PointCount / points.lenght) * 50}px',
                        height: '${10 + PointCount / points.lenght) * 50}px' 
                        }}
                            onClick={() => {
                                const expansionZoom = Math.min(
                                    supercluster.getClusterExpansionZoom(cluster.id),
                                    20
                                );
                                setViewport({
                                    ...viewport,
                                    latitude,
                                    longitude,
                                    zoom: expansionZoom,
                                    transitionInterpolator: new FlyToInterpolator({
                                        spped: 2
                                    }),
                                    transitionDuration: "auto"
                                });
                            }}
                            >
                        {pointCount}

                    </div>
                </Marker>

            );
        }



        return  (
        <Marker 
        key={cluster.properties.crimeId}
        latitude={latitude}
        longitude={longitude}
        >


            <button className="crime-marker"
            >


                <img src="/custody.svg" alt="crime doesn't pay" />

            </button>
        </Marker>
        );
        })}
    </ReactMapGL>
    </div>
    );
}

--

https://www.youtube.com/watch?v=3HYvbP2pQRA&t=12s

Any suggestions are welcomed.

Thank you,