Hello! I'm trying to add ThreeJS into my next project and I'm having trouble loading my 3D model into the page.

This is my component:

import { Canvas, useLoader } from "@react-three/fiber";
import { TextureLoader } from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import styled from "styled-components";

const Container = styled.div`
  position: absolute;
  height: calc(100% - 75px);
  width: 100%;
`;

export default function BasicScene() {
  const tapeDeck = useLoader(OBJLoader, "/models/tapeDeck.obj");
  const tapeDeckTexture = useLoader(TextureLoader, "/textures/tapeDeck.png");

  return (
    <Container>
      <Canvas>
        <mesh>
          <primitive object={tapeDeck} position={[1, 0, -4]} />
          <meshStandardMaterial map={tapeDeckTexture} flatShading={true} />
        </mesh>
      </Canvas>
    </Container>
  );
}

The error I'm seeing is this:

TypeError: Failed to parse URL from /models/tapeDeck.obj

I'm running everything locally on dev currently. The files are located in my public folder.

What am I missing here?