I am using react-three-fiber(built on Three.js) and want to add x,y,z axes to my cube. The issue is that only 2 of my axes are showing (even when the cube rotates, the third axes doesn’t show), and also, the axes do not move with the cube, they just stay aligned with the page. How do I get the axes to rotate with the cube?

Also how can I add labels (x,y,z) to the axes?

Thanks! Here’s my code:

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

        useFrame(() => {
            ref.current.rotation.x += .005
            ref.current.rotation.y += .005
            ref.current.rotation.z += .005
        })

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

<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={[0, 0, 0] } rotation={[0,0,0]}/>
          <axesHelper args={[5, 5, 5]} />
        </Canvas>