Why do the coordinates seem different

when hovering, the block animates and rises up, but RigidBody is a little late
synchronization occurs in each frame
it seems that the animation takes the origin of coordinates from the coordinates of RigidBody
how can this be fixed

 function BoxObject({count}) {
        const meshRef = useRef();
        const rigidBodyRef: MutableRefObject<RapierRigidBody> = useRef();   
    
        const [isHovered, setHovered] = React.useState(false);
        const props = useSpring<MeshProps>({
            position: isHovered ? [2, 2, 0] : [2, 1, 0]
        });
    
        const updateRigidBody = useCallback(() => {
            if (!meshRef.current || !rigidBodyRef.current) {
                return;
            }
            if (!isHovered) {
                return;
            }
            const {position, rotation} = meshRef.current;
            rigidBodyRef.current.setTranslation(position, false);
            // rigidBodyRef.current.setRotation(rotation, true);
        }, [isHovered]);
    
        useFrame(() => {
            updateRigidBody();
        })
    
        return <group position={[2, 1, 0]}>
            {new Array(count).fill(0).map((k, i) =>
                <a.mesh
                    {...props}
                    ref={meshRef}
                    key={`box${i}`}
                    onPointerOver={() => setHovered(true)}
                    onPointerOut={() => setHovered(false)}
                >
                    <RigidBody
                        ref={rigidBodyRef}
                        name={`box${i}`}>
                        <Block/>
                    </RigidBody>
                </a.mesh>
            )}
        </group>
    }