[Bug]: PointAnnotation is displayed below other properties IOS

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.74.0

Platform

iOS

@rnmapbox/maps version

10.1.28

Standalone component to reproduce

import React, { Image, useRef } from 'react';
import {
  MapView,
  ShapeSource,
  SymbolLayer,
  Images,
  PointAnnotation,
} from '@rnmapbox/maps';

const Component = () => {
  const pointAnnotationRefs = useRef({});
  const imagesUsedInMap = {'TOP_ID': { uri: 'image-url' }}
  const topPlaces = [{"geometry": {"coordinates": [-118.2481904, 34.056944]}, "id": "TOP_ID"}]

  return (
    <MapView>
      {imagesUsedInMap && <Images images={imagesUsedInMap} />}
        <ShapeSource
          id='placesShape'
          shape={{
            type: 'FeatureCollection',
            features: [{ id: '123', "geometry": {"coordinates": [-118.251219, 34.052148]} }],
          }}
        >
          <SymbolLayer
            id='placesLayer'
            style={{ iconImage: [
              'case',
              ['==', ['to-number', ['get', 'isFavorite']], 1],
              'favorite',
              ['to-string', ['get', 'icon']],
            ] }}
          />
        </ShapeSource>

      {topPlaces?.length ? topPlaces.map((p) => (
        <PointAnnotation
          ref={(ref) => {
            pointAnnotationRefs.current[p.id] = ref;
          }}
          id={p.id}
          key={p.id + '--top'}
          coordinate={p.geometry.coordinates}
        >
          <Image
            source={imagesUsedInMap[p.id]}
            defaultSource={require('assets/img/no_image_placeholder.png')}
            style={{ width: 40, height: 40, borderRadius: 100, borderWidth: 1.5 }}
            fadeDuration={0}
            key={p.id + '--img'}
            onLoad={() => {
              pointAnnotationRefs?.current[p.id].refresh();
            }}
          />
        </PointAnnotation>
      )) : <></>}
  </MapView>
  )
}

Observed behavior and steps to reproduce

The previous code renders a list of icons and images that represent places in real life, however we have the issue that the icons appear above the images

I tried to correct this using the "symbolSortKey" and "belowLayerID" properties without success. If there is a way to achieve this it would be of great help.

Expected behavior

The images (PointAnnotations) are displayed above the icons (SymbolLayers), this is how looks in android:

Notes / preliminary analysis

No response

Additional links and references

No response

Start with the standalone MapView reproduction using PointAnnotation and SymbolLayer on iOS, then compare its rendering order with Android. Trace the PointAnnotation and SymbolLayer entry points in the React Native module and determine how their layers are ordered; done means PointAnnotations render above SymbolLayers on iOS as shown in the expected behavior.