React-Three-Fiber (R3F): problème de chargement du chargeur GLTF. Pourquoi ne puis-je pas voir mon modèle?

J'essaye de charger un modèle gltf en react-three-fiber (R3F) et je fais un cauchemar. J'ai essayé de chercher la réponse et il y a eu des gens avec un problème similaire mais je n'ai pas été en mesure de résoudre mon problème.

Je continue à avoir ceci dans la console:

import React, { Suspense } from "react";
import { Canvas, useLoader } from "react-three-fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import * as THREE from "three";

import Box from "./Components/Sphere.Component";
import Plane from "./Components/Plane.Component";

import Controls from "./Components/Controls.Component";

import "./App.css";

const Chair = () => {
  const { nodes } = useLoader(GLTFLoader, "../public/mindbreaker.glb");
  return (
    <mesh geometry={nodes.Cube.geometry}>
      <meshStandardMaterial attach="material" color="lightblue" />
    </mesh>
  );
};

function App() {
  return (
    <Canvas
      camera={{ position: [0, 0, 5] }}
      onCreated={({ gl }) => {
        gl.shadowMap.enabled = true;
        gl.shadowMap.type = THREE.PCFSoftShadowMap;
      }}
    >
      <fog attach="fog" args={["pink", 5, 15]} />
      <Plane />
      <Controls />
      <Box />
      <Suspense fallback={null}>
        <Chair />
      </Suspense>
    </Canvas>
  );
}

export default App;

Pour autant que je sache, il n'y a rien de mal avec mon code. J'ai essayé de l'écrire en le chargeant dans le modèle de différentes manières. Le créateur de react-three-fiber a chargé un modèle dans son codeandbox il y a quelques jours comme ceci: https://codesandbox.io/s/r3f-gltf-useloader-8nb5i - donc je pense que cela ne peut pas être un problème avec R3F. J'ai remarqué qu'il utilisait un fichier glb plutôt qu'un fichier gltf alors je suis allé chercher un modèle glb pour vérifier si cela ferait une différence. J'ai réalisé que je devais aussi avoir mon modèle dans le dossier public, ce que j'ai également fait. Malheureusement, cela n'a pas fait de différence et je continue à avoir le problème.

J'ai essayé comme ceci:

    at JSON.parse (<anonymous>)
    at GLTFLoader.parse (GLTFLoader.js:213)
    at Object.onLoad (GLTFLoader.js:145)
    at XMLHttpRequest.<anonymous> (three.module.js:35829)

Voici une personne qui a eu un problème similaire: https://discourse.threejs.org/t/json-or-gltf-loader-for-three-js-in-react/3898/10 mais je ne comprends toujours pas vraiment comment résoudre ce problème problème.

Toute aide serait grandement appréciée, j'avais tellement hâte de jouer avec R3F mais il me semble avoir chuté au premier obstacle. Quelqu'un, s'il vous plaît, sauvez-moi de ce mal de tête! haha.

Merci!