Load Model using Async Function By calling database API

Questions
, , ,
1

HI all i am using react three fiber to get Models from database(models are actually stored in Root Public folder of My project. But whenever i try to access them i get an error.
Here is the code

const Model = async () => {
  // modelFile = ('')
  // const { scene, materials, nodes } = useLoader(GLTFLoader, '/v1.glb');
  console.log(modelFile);
  var url = window.location.pathname;
  console.log(url);
  var id = url.substring(url.lastIndexOf("/") + 1);

  let res = await API.get(`/products/product_by_id?id=${id}&type=single`);
  console.log(res);
  modelFile = JSON.stringify(res.data.modalFile.filePath);
  console.log(modelFile);
  console.log(id);
  const { scene, materials, nodes } = useLoader(GLTFLoader, modelFile);
  result = scene.children[0];
  console.log(result);

  result.traverse((n) => {
    if (n.isMesh) {
      if (n.name === "manBody") {
        console.log(n.material.color);
        n.material.color.set(0x111111);
        n.material.metalness = 0.6;
        n.material.roughness = 0.05;
      }
    }
  });

  return (
    <>
      {modelFile && (
        <primitive
          castShadow
          receiveShadow
          object={scene}
          scale={0.4}
          color="0x001a7a"
        />
      )}
    </>
  );
};

The error is
1