Maps cannot load when the screen is moving too fast - react-native

Question

I have a list of points that are the coordinates of the journey.
It runs normally when I use a vehicle marker run on the map with a duration of 500 ms.
But when I used animateToRegion to make the map follow the vehicle, problems started to happen:
Normally, map needs about 1second to load. So when use animateToRegion with duration is 500 ms. Map hasn't downloaded yet. ( as the right of image )
const intervalRef = useInterval(
() => {
if (timerRef.current < data.length - 1) {
setTimer(timer => timer + 1);
timerRef.current += 1;
} else {
window.clearInterval(intervalRef.current);
if (timerRef.current === data.length - 1) {
setPlayed(false);
}
}
},
isPlayed ? timeDuration : null,
);
// timer update per timeDuration = 500ms
useEffect(() => {
animateMarker();
mapRef?.current?.animateToRegion({
latitude: data[timer].Lt,
longitude: data[timer].Ln,
latitudeDelta: SUP_LATITUDE_DELTA,
longitudeDelta: SUP_LONGITUDE_DELTA,
});
}, [timer]);
const animateMarker = () => {
const newCoordinate = {
latitude: data[timer].Lt,
longitude: data[timer].Ln,
latitudeDelta: SUP_LATITUDE_DELTA,
longitudeDelta: SUP_LONGITUDE_DELTA,
};
if (Platform.OS === 'android') {
if (marker) {
marker.animateMarkerToCoordinate(
newCoordinate,
timer == 0 ? 0 : timeDuration,
);
}
} else {
coordinate.timing(newCoordinate).start();
}
};
Video demo
So does someone have any solutions for it?