I am currently working on my portfolio website and wanted to add a 3d model gltf file format. I have created the application in app directory.

I am getting a invalid url error on loading the gltf file. The model is rendered ryt but the there is console log.
The file is stored in public directory.

This is my Desksetup page where i am trying to load the gltf file.

"use client"

import { OrbitControls } from "@react-three/drei";
import { Canvas, useLoader } from "@react-three/fiber";
import { Color } from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";


export default function DeskSetup() {

    const desk = useLoader(GLTFLoader, './DeskSetup/desksetup.gltf')

    return (
        <main className="flex w-full min-h-screen">
            <div className="w-[50%] h-[50%]">
                <Canvas camera={{ position: [-12,12,12] }}>
                    <OrbitControls
                        enableDamping
                        enablePan
                        enableRotate
                        enableZoom
                    />
                    <pointLight position={[-5,7,0]} intensity={50} color={new Color(0x6768EE)} />
                    <pointLight position={[-5,7,0]} intensity={20} />
                    <pointLight position={[5,6,0]} intensity={10} color={new Color(0x22deff)}/>
                    <pointLight position={[5,10,5]} intensity={30} color={new Color(0xdd21fe)}/>
                    <pointLight position={[5,10,-5]} intensity={20} color={new Color(0x22deff)}/>
                    <group>
                        <primitive object={desk.scene} />
                    </group>
                </Canvas>
            </div>
            
        </main>
    )
}

The console log error

⨯ TypeError: Failed to parse URL from ./DeskSetup/desksetup.gltf
  code: 'ERR_INVALID_URL',
  input: './DeskSetup/desksetup.gltf'

I am really hoping if anyone could help me out with this.