I am receiving yaw, pitch, and roll values through websockets and I want to rotate the cube based on these values, in my React component, using react-three-fiber(Three.js). The issue is that even though the values are barely changing, the cube is constantly rotating quickly….

This is my code:

import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { useOutletContext } from 'react-router';

export default function OrientationVisualizer() {
    const [hovered, hover] = useState(false)
    const [clicked, click] = useState(false)
    const [pose, setPose] = useState({}) //data
    const socket = useOutletContext()['socket'];

    const Box = (props) => {
        const ref = useRef()  
        const websocketRef = useRef();
        const connectWebsocket = () => {
        if (!websocketRef.current) {
            socket.addEventListener("message", (ev) => {
            setPose(JSON.parse(ev.data.replaceAll("'", '"')))
            });
            websocketRef.current = socket;
        }
        };
        connectWebsocket();

        useFrame(() => {
            console.log(ref.current.rotation) 
            ref.current.rotation.x = pose.roll
            ref.current.rotation.y = pose.pitch
            ref.current.rotation.z = pose.yaw
        })

        return (
          <mesh
            {...props}
            ref={ref}
            <boxGeometry args={[3, 3, 3]} />
            <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
          </mesh>
        )
      }

      return(
        <>
        <div>
        <Canvas>
          <ambientLight intensity={Math.PI / 2} />
          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
          <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
          {/* <Box position={[-1.2, 0, 0]} /> */}
          <Box position={[0, 0, 0]} />
        </Canvas>
        </div>

       <div>
        {Object.entries(pose).map(([key, value]) => ( //data.payload
            <div>{key}: {value}</div>
        ))}
        </div>
        </>
      )
    }

This is when I console.log ref.current.rotation (you can see the x,y, and z values are barely changing)

OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.712, _z: 161.56, _order: 'XYZ', …}isEuler: true_onChangeCallback: ƒ onRotationChange()_order: "XYZ"_x: 359.16_y: -0.712_z: 161.56order: (...)x: (...)y: (...)z: (...)[[Prototype]]: Object
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.712, _z: 161.56, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.712, _z: 161.56, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 0, _y: 0, _z: 0, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 0, _y: 0, _z: 0, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.713, _z: 161.629, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.713, _z: 161.629, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.713, _z: 161.629, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.713, _z: 161.629, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 0, _y: 0, _z: 0, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 0, _y: 0, _z: 0, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.714, _z: 161.677, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.714, _z: 161.677, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.714, _z: 161.677, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.714, _z: 161.677, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 0, _y: 0, _z: 0, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.714, _z: 161.677, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.714, _z: 161.677, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 0, _y: 0, _z: 0, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 0, _y: 0, _z: 0, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.712, _z: 161.737, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.712, _z: 161.737, _order: 'XYZ', …}
OrientationVisualizer.tsx:187 _Euler {isEuler: true, _x: 359.16, _y: -0.712, _z: 161.737, _order: 'XYZ', …}

Shouldn’t the cube barely be moving?

Also, is using useFrame correct in the case where I’m updating the component’s state with the data from the websockets and wanting to rotate the cube based on that state data? Could the fact that the OrientationVisualizer component’s state is constantly being updated when receiving new WS messages (every .2 second) be interfering with useFrame? Is there a better react-three-fiber hook to use?