Custom View in ShapeSource/Cluster

[usmanr626]

Hi everyone, I am looking to make a custom view in mapbox, when the map is zoom out it should show it as clusters (which is going perfectly), but I zoom in, the only option I have is to show an image/icon which I am using like this

<MapView
ref={mapRef}
style={{flex: 1}}
// onRegionDidChange={handleZoomChange} // Listen to zoom level changes
>

<Camera ref={cameraRef} zoomLevel={9} centerCoordinate={[67.0011, 24.8607]} />

    {/* ShapeSource for clustering */}
    <ShapeSource
      id='clusteredMarkers'
      shape={markersToGeoJSON(markers)}
      cluster={true}
      clusterRadius={50} // Adjust cluster radius in pixels as needed
      clusterMaxZoom={14} // Max zoom level where clustering occurs
      onPress={e => console.log(JSON.stringify(e, null, 2))}>
      {/* <Images images={{contentImage: IMAGES.dummyPP2}} /> */}
      <Images images={{contentImage: IMAGES.dummyPP2}} />

    
      

      <CircleLayer
        id='clusteredMarkersLayer'
        belowLayerID='clusters-count'
        filter={['has', 'point_count']} // Show clusters only
        style={{
          circlePitchAlignment: 'map',
          circleColor: '#6477FA',
          circleRadius: 20,
          circleOpacity: 1,
          circleStrokeWidth: 3,
          circleStrokeColor: 'white',
        }}
      />
      <SymbolLayer
        id='clusters-count'
        style={{
          textField: ['get', 'point_count'], // Display count of clustered points
          textSize: 30,
          textColor: '#ffffff',
          textHaloColor: '#000000',
          textHaloWidth: 1,

          textOffset: [0, 0],
        }}
      />

      {/* Individual Marker Layer (Placeholder for clustering; does not render view) */}
      <SymbolLayer
        id='individualMarkersLayer'
        filter={['!', ['has', 'point_count']]} // Show individual markers only (not part of cluster)
        style={{
          iconImage: 'contentImage', // A transparent 1x1 pixel or invisible icon
          iconSize: 0.05, // Essentially invisible
          textField: 'John Smith', // Display count of clustered points
          textSize: 18,
          textColor: '#ffffff',
          textHaloColor: '#000000',
          textHaloWidth: 1,
          textOffset: [0, 2.25],
          iconHaloColor: 'red',
          iconHaloWidth: 20,
        }}
      />
    </ShapeSource>
  </MapView>        

Is there a way to render a custom view when the map is zoomed in, instead of the symbolLayer iconImage,
I want to render something simple like this
<View style={{ width: 25, height: 25, backgroundColor: 'red' }}/>