What do my errors mean and how can i fix them?

Im following a course on yt from JavaScript Mastery(https://www.youtube.com/watch?v=0fYi8SGA20k&list=LL&index=3&t=1085s)
Its around 53 minutes in the vid
Im at the point where he starts working with the 3D model but i cant see the model anywhere in my page.

import { motion } from 'framer-motion';
import { styles } from '../styles';
import { ComputersCanvas } from './canvas';

const Hero = () => {
  return (
    <section className="relative w-full h-screen mx-auto">
      <div className={`${styles.paddingX} absolute inset-0 top-[120px] 
      max-w-7xl mx-auto flex flex-row items-start gap-5`}>
        <div className="flex flex-col justify-center items-center mt-5">
        <div className="w-5 h-5 rounded-full bg-[#9762fb]" />
        <div className="w-1 sm:h-80 h-40 bg-[#9762fb]" />
        </div>
        <div>
          <h1 className={`${styles.heroHeadText} text-white`}>Hallo, Ik ben <span className="text-[#9762fb]">Justin</span></h1>
          <p className={`${styles.heroSubText} mt-2 text-white-100`}>
          Ik ben een gepassioneerde <span className="text-[#9762fb]">Software<br/> Development</span> Student
          </p>
        </div>
      </div>
      <ComputersCanvas />

      <div className='absolute xs:bottom-10 bottom-32 w-full flex justify-center items-center'>
        <a href='#about'>
          <div className='w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2'>
            <motion.div
              animate={{
                y: [0, 24, 0],
              }}
              transition={{
                duration: 1.5,
                repeat: Infinity,
                repeatType: "loop",
              }}
              className='w-3 h-3 rounded-full bg-secondary mb-1'
            />
          </div>
        </a>
      </div>
    </section>
  )
}

export default Hero

Its about the ComputerCanvas

import { 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')
  return (
    <mesh>
      <hemisphereLight intensity={0.15} groundColor="black"/>
      <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;

and this is the index.js

import EarthCanvas from "./Earth";
import BallCanvas from "./Ball";
import ComputersCanvas from "./Computers";
import StarsCanvas from "./Stars";

export { EarthCanvas, BallCanvas, ComputersCanvas, StarsCanvas };

and im getting the errors in the console
error from console
(all the failed to reload errors are gone)
more errors from the console
Ive done everything the same in the yt vid and its not working for me but in the yt vid it does.

I expected a 3Dmodel but i dont know if its not loading in or the paths are wrong.
Ive even tried to recode the whole part of the vid but it still doesnt work