Can't import local gltf/glb file

Hello

So I'm trying to import a 3d .glb local file following this tutorial https://developers.arcgis.com/javascript/latest/sample-code/import-gltf/

but for some reason, it won't show up in my SceneView.

But if I use the link given the codepen which is this one https://developers.arcgis.com/javascript/latest/sample-code/import-gltf/live/canoe.glb it does show up

So it does work with links but not with local files (I use the same 3d model as the one in the codepen for the local file) Is this a bug or are there any solution/alternative to mitigate this problem

this is my App.js

import "./App.css";
import { Scene } from "@esri/react-arcgis";
import Point from "./components/Point";

function App() {
  return (
    <div className="App">
      <Scene
        style={{ width: "100vw", height: "100vh" }}
        mapProperties={{ basemap: "satellite", ground: "world-elevation" }}
        viewProperties={{
          camera: {
            position: [110.37764310836793, -7.782929602108119, 550.65501],
            heading: 0.51,
            tilt: 80,
          },
          ui: {
            components: [],
          },
        }}
      >
        <Point long={110.37764310836793} lat={-7.782929602108119} />
      </Scene>
    </div>
  );
}

export default App;

and this is my Point.js

import { loadModules } from "esri-loader";
import { useEffect, useState } from "react";

function Point({ view, long, lat }) {
  const [graphic, setGraphic] = useState();
  useEffect(() => {
    loadModules(["esri/Graphic"])
      .then(([Graphic]) => {
        const point = {
          //Create a point
          type: "point",
          longitude: long,
          latitude: lat,
          z: 500,
        };

        const simpleMarkerSymbol = {
          type: "point-3d",
          symbolLayers: [
            {
              type: "object",
              resource: {
                href: "../models/canoe.glb",
              },
              height: 10000,
            },
          ],
        };

        const pointGraphic = new Graphic({
          geometry: point,
          symbol: simpleMarkerSymbol,
        });

        setGraphic(pointGraphic);
        view.graphics.add(graphic);
      })
      .catch((err) => console.error(err));

    return () => {
      view.graphics.remove(graphic);
    };
  });
  return null;
}

export default Point

Esri / react-arcgis

Can't import local gltf/glb file #219