[Bug]: Crash when changing Annotations source state in iOS

[g-sharat]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.73.4

Platform

iOS

@rnmapbox/maps version

10.1.19

Standalone component to reproduce

/* eslint-disable react/prop-types */
import {View, Text, StyleSheet, Button} from 'react-native';
import React, {useEffect, useRef, useState} from 'react';

import Mapbox, {Callout, Camera} from '@rnmapbox/maps';


export default function MapsPage() {
  var mapRef = useRef();

  const markers1 = [
    {
      cord: [2.0, -2.9999],
      isFav: true,
    },
    {
      cord: [5.044, -2.9999],
      isFav: true,
    },
    {
      cord: [9.044, -3.999],
      isFav: false,
    },
  ];

  const markers2 = [
    {
      cord: [3.0, -5.9999],
      isFav: true,
    },
    {
      cord: [4.044, -9.9999],
      isFav: true,
    },
    {
      cord: [9.044, -11.999],
      isFav: false,
    },
  ];
  var [markers, setmarkers] = useState(markers1);

  useEffect(() => {
    setmarkers(markers1);
  }, []);

  const MyTxt = ({item}) => {
    return (
      <View style={{height: 20, backgroundColor: 'green'}}>
        <Text>Jam</Text>
      </View>
    );
  };

  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView style={styles.map}>
          <Mapbox.Camera
            defaultSettings={{
              centerCoordinate: [2.0, -2.9999],
              zoomLevel: 4,
            }}
          />

          {markers.map(item => {
            return (
              <Mapbox.PointAnnotation
                key={`long${item.cord[0]}`}
                id={`${item.cord[0] + item.cord[1]}`}
                coordinate={[item.cord[0], item.cord[1]]}>
                <MyTxt item={item} />
                <Callout title="Place name" />
              </Mapbox.PointAnnotation>
            );
          })}
        </Mapbox.MapView>
        <Button title="Change markers" onPress={() => setmarkers(markers2)} />
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: '100%',
    width: '100%',
  },
  map: {
    flex: 1,
  },
});

Observed behavior and steps to reproduce

Issue seems to be similar to #3412

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response