Mapbox custom icon is overlapping on MapboxGL.Callout container.

[akunal1]

Hi , I am displaying custom icon on the map . On click of custom icon , one tool tip with few text is coming on the screen . While I am zooming out , then the other custom markers are overlapping on my tooltip. Is there any way to fix this i.e other markers should come under the tooltip.

Note: its not happening with default marker .

customMarker.tsx

<MapboxGL.ShapeSource id="markersShape" shape={{ type: 'FeatureCollection', features }} style={{}}>
        {dealerList.map((data: any) => (
          <MapboxGL.SymbolLayer
            id={getDataId(data)}
            key={getDataId(data)}
            // sourceID='markersShape'
            filter={['==', '_id', getDataId(data)]}
            style={{
              iconSize: 2,
              iconAllowOverlap: false,
              iconImage: require('./assets/businessLocation.png'),
            }}
          />
        ))}
      </MapboxGL.ShapeSource>

customPointAnotation.tsx

 <MapboxGL.PointAnnotation
        key={id}
        id={id}
        title={title}
        coordinate={coordinate}
        selected={selected}
        onSelected={onSelected}
        onDeselected={() => {
          console.log('!!!!');
        }}
      >
        <MapboxGL.Callout>
          <View
            style={{
              backgroundColor: 'white',
              height: 200,
              width: 200,
              justifyContent: 'center',
              padding: 16,
            }}
          >
            <Text>Title</Text>
            <Text>Name : Location </Text>
          </View>
        </MapboxGL.Callout>
        <Image
          source={require('./assets/businessLocation.png')}
          style={{
            resizeMode: 'contain',
            width: 25,
            height: 25,
          }}
        />
      </MapboxGL.PointAnnotation>

output :

[akunal1]

it was emulator issue