Javascript 在react map gl中设置geojson位置动画

我一直在尝试在ReactJS应用程序上制作一个类似uber的动画，一旦用户开始驾驶，驾驶室的位置就会根据后端发送的坐标每5秒更新一次。但是标记的位置永远不会更新，即使它更新了，它只是在一个非常小的区域内移动，但不会沿着路径前进

一旦接受乘坐，我使用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]);

我在安装组件后调用了requestAnimationFrame，并使用refs取消清理动画

const animationRef = React.useRef();

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

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

这是渲染函数

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

{rideData！==null&&(
)}

找到解决方案了吗？@Borbat我最终通过缩短间隔和减少requestAnimationFrame中使用的步骤来解决这个问题