Animating geojson position in react-map-gl

Question

I've been trying to make an uber like the animation on a ReactJS app where once the user starts a ride the position of the cab updates according to the coordinates sent by backend every 5 seconds. But the position of the marker never updates, even if it does it just moves around in a very small area but does not progress along the path.

Once a ride is accepted, I subscribe to cab location coordinates using Hasura.

useEffect(() => {
if (rideFound) {
  console.log('found ride');
  subscribeRideLocation(props.details.vehicle.id, (res) => {
    const loc = res.data.yt_vehicle[0].location.replace('(', '').replace(')', '').split(',');
    setRideData({ coordinates: loc, type: 'Point' });
  });
}
}, [rideFound]);

I've put requestAnimationFrame call once the component is mounted and used refs to cancel animation for cleanup.

const animationRef = React.useRef();

const animatePoint = () => {
animationRef.current = requestAnimationFrame(animatePoint);
};

useEffect(() => {
animatePoint();
return () => {
  cancelAnimationFrame(animationRef.current);
};
}, []);

This is the render function

{rideData !== null && (
        <Source type="geojson" data={rideData}>
          <Layer {...pointLayer} />
        </Source>
      )}