RN Mapbox MarkerView not showing in IOS

I am trying to develop a map feature through expo development builds and using the @rnmapbox/maps library. I have the issue that when I build my app I can see the pins I created in Android yet in IOS I can not see them.

The code is as follows:

For the plug-ins I used the following config:

plugins: [
      [
        "@rnmapbox/maps",
        {
          "RNMapboxMapsImpl": "mapbox",
          "RNMapboxMapsDownloadToken": "MY_TOKEN"
        }
      ]
      ]

And the file where I initiate my map and put one of the marker is as follows:

import MapboxGL, { Camera, MapView, MarkerView, offlineManager } from '@rnmapbox/maps';
import geoViewport from '@mapbox/geo-viewport';

MapboxGL.setWellKnownTileServer('Mapbox');
MapboxGL.setAccessToken('MY_ACCESS_TOKEN');

const CENTER_COORD = [-83.7680103841464, 9.183611130691833];
const MAPBOX_VECTOR_TILE_SIZE = 512;
const STYLE_URL = 'MY_MAPBOX_STYLE';


const MapScreen = () => {
  const { width, height } = useWindowDimensions()
  const camera = useRef(null);
  const [packName, setPackName] = useState('pack');
  const [selectedPoint, setSelectedPoint] = useState(null);
  const [markerScale, setMarkerScale] = useState(0);
  const mapview = useRef(null);
  const marker = useRef(null);

  const handlePinClick = (coordinate) => {
    setSelectedPoint(coordinate);
  };


  const getPack = async () => {
    const pack = await offlineManager.getPack(packName);
    console.log('=> packs:', pack);
    if (pack) {
      console.log(
        'pack:',
        pack,
        'name:',
        pack.name,
        'bounds:',
        pack?.bounds,
        'metadata',
        pack?.metadata,
      );

      console.log('=> status', await pack?.status());
    }
  }

  const cratePack = async () => {

    const bounds = geoViewport.bounds(
      CENTER_COORD,
      12,
      [width, height],
      MAPBOX_VECTOR_TILE_SIZE,
    );

    const options = {
      name: packName,
      styleURL: STYLE_URL,
      bounds: [
        [bounds[0], bounds[1]],
        [bounds[2], bounds[3]],
      ],
      minZoom: 10,
      maxZoom: 20,
      metadata: {
        whatIsThat: 'foo',
      },
    };

    offlineManager.createPack(options, (region, status) =>
      console.log(
        'status: ',
        status,
      ),
    );

  }

useEffect(() => {
    MapboxGL.locationManager.start();
    getPack();


    const bounds = geoViewport.bounds(
      CENTER_COORD,
      12,
      [width, height],
      MAPBOX_VECTOR_TILE_SIZE,
    );

    console.log('=> bounds', bounds);

    return () => {
      MapboxGL.locationManager.stop();
    };
  }, []);

  useEffect(() => {
    if (camera.current) {
      camera.current.setCamera({
        centerCoordinate: [-83.7680103841464, 9.183611130691833],
        zoomLevel: 16,
      });
      camera.current.flyTo([-83.7680103841464, 9.183611130691833], 2000);
      setMarkerScale(1);
    }


  }, [camera]);

  const getZoom = async () => {
    const zoom = await mapview.current?.getZoom();
    if (zoom <= 13) {
      setMarkerScale(0);  // El marcador se oculta completamente.
    } else if (zoom <= 14) {
      const scale = zoom - 13;  // Esto dará un valor entre 0 y 0.7.
      setMarkerScale(scale);
    } else {
      setMarkerScale(1);  // Tamaño normal del marcador.
    }
  }

  return (
    <ContainerPage style={{ flex: 1, width: '100%', backgroundColor: '#ebebde' }}>
      <View style={styles.page}>
        {/* <Button title="Create Pack" onPress={cratePack} /> */}
        <View style={[styles.container, { width: width }]}>
          <MapView
            style={styles.map}
            ref={mapview}
            styleURL='mapbox://styles/muvinai/cln3hlwst06rr01qbhqyt982l'
            scaleBarEnabled={true}
            // onRegionWillChange={getZoom}
            onRegionIsChanging={getZoom}
          >
            <Camera zoomLevel={15} centerCoordinate={CENTER_COORD} />

            {venueSample.map((venue, index) => {
              return (
                <MarkerView key={index} coordinate={venue?.location?.coordinates} allowOverlap={false}>
                  <TouchableOpacity style={{ alignItems: 'center' }} onPress={() => handlePinClick({ coords: venue?.location?.coordinates, index: index })}>
                    <Image source={{ uri: venue?.icon?.url }} style={{ width: 60 * markerScale, height: 50 * markerScale }} />
                    <Text style={{ fontFamily: FONTS.medium, fontSize: SIZES.small * markerScale }}>{venue.name} Stage</Text>
                  </TouchableOpacity>
                </MarkerView>
              );
            })}
            {selectedPoint && selectedPoint.coords ?
              (
                <MapModal selectedPoint={selectedPoint} setSelectedPoint={setSelectedPoint} />
              ) : null
            }
          </MapView>
        </View>
      </View>
    </ContainerPage>
  );
};

The thing is, I am also using a modal when I press the pin. I tried working with point annotations but it’s not working as good (as the modal becomes covered by the points in my map). I send a screenshot in IOS and android.

Any suggestions about how to advance with this issue are welcomed, corrections or improvements to my code also!

The following are two pictures of the map:

1. IOS
2. Android