onPress triggers when i click outside of the Mapbox ShapeSource / CircleLayer

Question

I am using the Mapbox library of @rnmapbox/maps and encountering a problem with the onPress event. When I click slightly outside the shapesource or circlelayer, the onPress event is triggered, but I only want it to be triggered when the user clicks specifically on the circlelayer object. Here's a simple version of the code I'm using and the handleOnPress function which gets called when the onPress event is triggered:

<Mapbox.ShapeSource 
  hitbox={false}
  id="heatmapAlcoSource" 
  shape={{ type: 'FeatureCollection', features: alcoData }} 
  options={{ cacheKey: `${Date.now()}` }}
  onPress={handleOnPress}
>
  <Mapbox.CircleLayer
    id="heatmapCircle"
    style={{
      circleRadius: 10,
      circleOpacity: 1,
      circleBlur: 1.1,
      circleColor: '#ff6161',
      circleStrokeWidth: 2,
      circleStrokeColor: '#ff6161',
    }}
  />
</Mapbox.ShapeSource>

const handleOnPress = (event) => {
  const feature = event.features[0];
  console.log(event);
  setSelectedFeature(feature);
};

The problem can be understood from the example image given below, where if I click on the yellow position (outside the circlelayer), the circlelayer (white marking) gets triggered.

I am looking for ideas or suggestions on how to modify the code so that the onPress event is only triggered when clicking on the circlelayer object within the shapesource. The event object structure received by the handleOnPress function looks like this:

{
  "coordinates": {
    "latitude": 12.345678910111212,
    "longitude": 1.234567891011121
  },
  "features": [
    {
      "geometry": {...},
      "properties": {...},
      "type": "Feature"
    }
  ],
  "point": {
    "x": 170.3333282470703,
    "y": 286.3333282470703
  }
}

Answer 1

Two possibilities I'd see. I don't know the library so I just can supply info based on assumption and a quick search through their docs.

1. The ShapeSource should have a "hitbox" prop, which allows you to set the height and width. The default is 44x44 pixels. Assuming the 10 radius you provided is measured in px the hitbox would thus be twice as big as the shape shown. https://github.com/rnmapbox/maps/blob/main/docs/ShapeSource.md#hitbox

2. If this does not work, I'd think about trying to see if in the onClick event you can manually check if the X and Y coordinates you have are close enough to the point that should have been clicked. Sadly, the docs don't seem to mention enough about the event or how the features are defined for me to definitely say if this is possible.