[Bug]: queryRenderedFeaturesAtPoint is inconsistent when using onLongPress on MapView

[fractalscape13]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.73.2

Platform

iOS, Android

@rnmapbox/maps version

10.1.14

Standalone component to reproduce

import React from 'react';
import {SafeAreaView} from 'react-native';
import Mapbox, {MapView} from '@rnmapbox/maps';

const MAPBOX_ACCESS_TOKEN = 'your-mapbox-access-token';
const BASE_STYLE = 'mapbox://styles/mapbox/streets-v11';

Mapbox.setAccessToken(MAPBOX_ACCESS_TOKEN);

function App(): React.JSX.Element {
  const mapRef = React.useRef<MapView>(null);
  const onLongPress = async (e: { geometry: any; }) => {
    const geometry = e.geometry;
    const features = await mapRef.current?.queryRenderedFeaturesAtPoint(
      [geometry.coordinates[0], geometry.coordinates[1]],
      {layers: ['waterbody_ids_layer']},
    );
    const waypointWaterbodyId =
      features?.features[0]?.properties?.waterbody_id || undefined;
    console.log('waypointWaterbodyId-->>>', waypointWaterbodyId);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <MapView
        ref={mapRef}
        style={{flex: 1}}
        onLongPress={onLongPress}
        styleURL={BASE_STYLE}>
        <Mapbox.Camera
          animationMode="flyTo"
          defaultSettings={{
            centerCoordinate: [-93.5667, 44.9333],
            zoomLevel: 12,
            pitch: 0,
            heading: 0,
          }}
        />
        <Mapbox.VectorSource
          onPress={e =>
            console.log(
              'VectorSource-->>>',
              e.features[0]?.properties?.waterbody_id,
            )
          }
          id="waterbody_ids"
          url="mapbox://omniafishing.omnia-waterbodies"
          tileUrlTemplates={[
            `https://api.mapbox.com/v4/omniafishing.omnia-waterbodies/{z}/{x}/{y}.vector.pbf?access_token=${MAPBOX_ACCESS_TOKEN}`,
          ]}>
          <Mapbox.FillLayer
            id="waterbody_ids_layer"
            sourceLayerID="waterbodies"
            style={{
              fillOpacity: 1,
              fillColor: 'hotpink',
            }}
          />
        </Mapbox.VectorSource>
      </MapView>
    </SafeAreaView>
  );
}

export default App;

Observed behavior and steps to reproduce

The "onPress" method directly on the "Mapbox.VectorSource" component works as expected. I get the id logged correctly every time, very consistently.

The "onLongPress" on the parent "MapView" component calls "queryRenderedFeaturesAtPoint" and tries to pull the data from the VectorSource layer. It usually returns "undefined", but if I zoom in to a lake and move around a bit, eventually the longPress will give me the correct data. Then sometimes it will give me the same data when I am not pressing on the layer. Then it will go back to undefined. It's inconsistent but if you zoom in and move around a bit, it will work sometimes.

Expected behavior

Expected behavior is that the queryRenderedFeaturesAtPoint will return the data from the point where the long press happened from the VectorSource layer referenced by id in the "layers" key/value par.

Notes / preliminary analysis

No response

Additional links and references

No response