cannot render 3d model of gltf

i am using react-three fiber and after all of this code it is not rendering on the screen i dont what is the issue with this at all

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 groundColor="black" intensity={0.15} />
      <pointLight intensity={1} />
      <primitive object={computer.scene} />
    </mesh>
  );
};
const ComputersCanvas = () => {
  return (
    <Canvas
      frameloop="demand"
      shadows
      camera={{ position: [20, 3, 5], fov: 25 }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls
          enableZoom={false}
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers />
      </Suspense>
      <Preload all />
    </Canvas>
  );
};
export default Computers;

i tried import the hemiSphereLight from three.js but it is also giving errors