[Bug]: PointAnnotation propagation/bubling undeneath elements on select

Mapbox Implementation

Mapbox

Mapbox Version

10.12.0

Platform

iOS

@rnmapbox/maps version

10.0.15

Standalone component to reproduce

import React, { Camera, MapView, PointAnnotation, StyleURL } from '@rnmapbox/maps';
import { useRef } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';

const BASE_COORDINATES = {
  centerCoordinate: [98.34, 7.96],
  zoomLevel: 10.1,
};

const Mapbox = (p) => {
  const cameraRef = useRef(null);
  const pointAnnotationRef = useRef(null);

  return (
    <View style={css.container}>
      <MapView
        attributionEnabled={false}
        attributionPosition={{ bottom: 100, right: 0 }}
        logoEnabled={false}
        pitchEnabled={false}
        rotateEnabled={false}
        scaleBarEnabled={false}
        style={css.map}
        styleURL={StyleURL.Dark}
      >
        <Camera
          ref={cameraRef}
          animationDuration={0}
          animationMode="flyTo"
          centerCoordinate={BASE_COORDINATES.centerCoordinate}
          zoomLevel={BASE_COORDINATES.zoomLevel}
        />

        {p.markers.map((item) => {
          return (
            <TouchableOpacity
              key={item.id.toString()}
              onPress={() => {
                pointAnnotationRef.current?.setState({ selected: true });
                console.log('onSelected');
              }}
              style={{ height: 20, width: 20, zIndex: 9999 }}
            >
              <PointAnnotation
                id="marker"
                ref={pointAnnotationRef}
                coordinate={item.coordinates}
                onSelected={() => {
                  console.log('onSelected');
                }}
              >
                <View>
                  <View />
                </View>
              </PointAnnotation>
            </TouchableOpacity>
          );
        })}
      </MapView>
    </View>
  );
};

export default Mapbox;

const css = StyleSheet.create({
  container: {
    height: '100%',
    width: '100%',
  },
  map: {
    flex: 1,
  },
});

Observed behavior and steps to reproduce

I have many PointAnnotation placed in similar area, but when i zoom out they become clustered but thats ok. But as soon as i click on on the top item i see it selects all bellow items also.

Example is that when i click i get console.log('onSelected'); not once but as many items i have underneath the initial PointAnnotation

Expected behavior

When i click on top level of PointAnnotation it should only select top PointAnnotation item and ignore any underneath

Notes / preliminary analysis

No response

Additional links and references

No response

Start by running the standalone React Native example against the listed iOS and @rnmapbox/maps versions, with multiple PointAnnotation components overlapping. Inspect PointAnnotation selection and event handling, then verify that tapping the top annotation produces only one onSelected callback rather than callbacks for annotations beneath it.