react three js 3d object rotation

I have been working in this project and when i created this 3d object which should rotate as per my code is not rotating
please find the error of this code

this is my code :

import React , {Suspense,useEffect,useState} from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls ,Preload,useGLTF} from "@react-three/drei";
import canvasLoader from '../Loader'
const Computers = () => {
  const computer = useGLTF("./desktop_pc/scene.gltf");
  console.log(computer);
  return (
      <mesh>
          <hemisphereLight intensity={0.9} groundColor="black" />
          <pointLight intensity={2} />
          <spotLight position={[-20,50,20]}/>
          <primitive
              object={computer.scene}
              scale={0.65}
              position={[0, -3.25, -1.5]}
              rotation={[-0.01, -0.17, -0.1]}
          />
      </mesh>
  );
};

const ComputersCanvas = () => {
  return (
      <Canvas>

          frameloop="demand"
          shadows
          camera={{
              position: [30, 3, 5],
              fov: 25,            
          }}
          gl={{ preserveDrawingBuffer: true }}>
          <Suspense >
              <OrbitControls
                  enableZoom={false}
                  maxPolarAngle={Math.PI/ 2}
                  minPolarAngle={Math.PI/2}
                  enableRotate={true}
              />
              <Computers />
          </Suspense>
          <Preload all />
      </Canvas>
  );
};
export default ComputersCanvas;

please check this code resolve the errors

The code you shared does not actually contain any rotation logic. It only defines the initial rotation of the 3D model. To actually rotate the model, you need to:

Store the model's rotation in state
Update the rotation state over time to animate the rotation
Pass the rotation state to the model as the rotation prop

Here is an example:

  const [rotation, setRotation] = useState([0, 0, 0]);

  useEffect(() => {
  const interval = setInterval(() => {
  setRotation(prevRotation => [
  prevRotation[0] + 0.01,  // Increment x rotation by 0.01 radians
  prevRotation[1],         // Keep y rotation same
  prevRotation[2]          // Keep z rotation same
  ]);  
  }, 20);

  return () => clearInterval(interval);
  }, []);

  return (
  <primitive
  object={computer.scene}
  scale={0.65}
  position={[0, -3.25, -1.5]}
  rotation={rotation}  // Pass rotation state  
  />
  );

This will increment the x rotation by 0.01 radians every 20ms, effectively rotating the model around the x-axis.

So to fix your issue, you need to:

Store the rotation in state
Increment the rotation state over time using useEffect
Pass the rotation state to the <primitive> component's rotation prop