mapbox - @react-native-mapbox-gl/maps のマーカー クラスタリング

Question

@react-native-mapbox-gl/mapsを使用しており、マーカーのクラスタリングを実装したいと考えています。実装の解決策が見つかりませんでした。画像を添付すると、2 つのマーカーを組み合わせる必要があることが示されますが、そうではありません。

以下にコードを貼り付けます。

<MapboxGL.MapView
      showUserLocatin={true}
      zoomLevel={10}
      zoomEnabled={zoomEnabled}
      pitchEnabled={true}
      onPress={onMapPress}
      onRegionIsChanging={onRegionIsChanging}
      surfaceView={true}
      rotateEnabled={rotateEnabled}
      compassEnabled={false}
      showUserLocation={false}
      userTrackingMode={MapboxGL.UserTrackingModes.None}
      scrollEnabled={scrollEnabled}
      styleURL={styleURL}
      centerCoordinate={getFocusPoint() || getStartingPoint()}
      ref={(c) => (_map = c)}
      onRegionDidChange={onRegionChange}
      style={style}
      cluster
    >
      {renderLines()}
      <MapboxGL.SymbolLayer
        id={'abc'}
        sourceID={MapboxGL.StyleSource.DefaultSourceID}
      />
      <MapboxGL.Camera
        zoomLevel={zoom}
        centerCoordinate={getFocusPoint() || getStartingPoint()}
      />
      {(simplePlaceData?.length > 0 || places?.length > 0) && renderMarkers()}
    </MapboxGL.MapView>

以下は renderMarkers 関数です (基本的に、MapboxGL.PointAnnotation 内のイメージ/アイコンのような RN コンポーネントを表示しています):

const renderMarkers = () => {
    if (simplePlaceData)
      return simplePlaceData?.map((_place) => {
        const {lat, lng, id} = _place
        const latVal = parseFloat(lat)
        const lngVal = parseFloat(lng)
        if (!lat || !lng || isNaN(latVal) || isNaN(lngVal)) return null

                return (
                    <MapboxGL.PointAnnotation
                        key={`${id}`}
                        id={`${id}`}
                        title={`${lat}-${lng}`}
                        coordinate={[parseFloat(lng), parseFloat(lat)]}>
                     <Col style={styles.mapMarkers}>
              <Icon
                name={'map-marker'}
                family={'materialCommunity'}
                color={Colors.linkBlue}
                size={31}
              />
            </Col>
                    </MapboxGL.PointAnnotation>
                )
            })
        else
            return places?.length > 0 &&  places.map(_place => {
                const {lat, lng, id, image, name} = _place.trip_place.place
                const isSelected = (getFocusPoint() || getStartingPoint())?.first() == lng &&
                    (getFocusPoint() || getStartingPoint())?.last() == lat
                if (Platform.OS === 'ios') {
                    return (
                        <MapboxGL.PointAnnotation
                            key={`${id}`}
                            id={`${id}`}
                            title={name}
                            coordinate={[parseFloat(lng), parseFloat(lat)]}
                        >
                            <MapMarker
                                image={{uri: image}}
                                imageSize={isSelected ? 41 : 31}
                                style={isSelected ? styles.mapMarkersSelected : styles.mapMarkers}
                                onPress={() => selectPlace(_place.trip_place.place, true)}
                            />
                        </MapboxGL.PointAnnotation>
                    )
                } else {
                    return (
                        <MapboxGL.MarkerView
                            id={`${id}`}
                            key={`${id}`}
                            coordinate={[parseFloat(lng), parseFloat(lat)]}
                            title={name}
                        >
                            <View style={isSelected ? styles.mapMarkerContainerSelected : styles.mapMarkerContainer}>
                                <MapMarker
                                    image={{uri: image}}
                                    imageSize={isSelected ? 41 : 31}
                                    style={isSelected ? styles.mapMarkersSelected : styles.mapMarkers}
                                    onPress={() => selectPlace(_place.trip_place.place, true)}
                                />
                            </View>
                        </MapboxGL.MarkerView>
                    )
                }
            })
    }

MapboxGL.PointAnnotation を適用して、マーカーを複数のアイテムを含む結合クラスターとして表示するための解決策はありますか? または、この機能を実現するために使用できる MapboxGL の別のコンポーネントがありますか?

ありがとう