React Native Maps not rerendering Markers on iOS - react-native

Question

I am using react native maps for displaying a map in my application, and this map should display markers that are fetched from a database online. When the map is mounted, and after fetching the marker data location points, I am updating a state containing the array of marker points, however, the markers do not get rendered after setting the state. Is there any work around in this? Here's a sample code:
P.S. This only occurs in iOS.
const [markerPoints, setMarkerPoints] = useState([])
useEffect(() => {
getMarkerPoints()
}, [])
const getMarkerPoints = callback => {
axios
.get(
'some end point',
)
.then(res => {
if (res.status === 200) {
setMarkerPoints(res.data.results)
}
})
.catch(error => {
console.log(error)
})
}
const renderMarkers = () => {
return markerPoints.map((place, index) => {
return (
<Marker
key={index}
coordinate={{
latitude: place.geometry.location.lat,
longitude: place.geometry.location.lng,
}}
/>
)
}
}
return (
<MapView
ref={map}
provider={PROVIDER_GOOGLE}
style={styles.map}
region={curRegion}
showsUserLocation={true}
showsMyLocationButton={false}
onRegionChangeComplete={onMapRegionChangeComplete}
customMapStyle={mapStyles}
>
{renderMarkers()}
</MapView>
)