am quite new to both react and three.js, im trying to render a .gltf file using the method const Loader = new GLTFLoader() however when the website is rendered and i view it in browser i see the error message, An error happened SyntaxError: Unexpected token < in JSON at position 0, if anyone would know what direction to point me in that would be great.

here's the code

rende.js:

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
export default class Rende extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x424242, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("scene").appendChild(renderer.domElement);

    const loader = new GLTFLoader();
    loader.load(
      "untitled.gltf",
      (gltf) => {
        scene.add(gltf.scene);
      },
      (xhr) => {
        console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
      },
      (error) => {
        console.error("An error happened", error);
      }
    );
 
  }
  render() {
    return <div id="scene" className="potato"></div>;
  }
}

and the coresponding component page

home.jsx:

export default function Home() {
  return (
    <Fragment>
      {" "}
      <div key={1} className="class">
        tagline
      </div>
      <Rende />
    </Fragment>
  );
}

if anyone can help that would be much apreciated. Thank you