ThreeJSでblenderのファイル(.glb)をReact上で読み込めない

前提

React上でblenderのファイル（.glb）をローディングできているのですがブラウザ上で表示されません。

実現したいこと

・ブラウザにblenderのファイル（.glb）を表示させたい。

該当のソースコード

以下のコードをそのまま読み込んでいます。

Three.js
import { useEffect } from 'react';
import {
  WebGLRenderer,
  Scene,
  PerspectiveCamera,
} from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const Three: React.FC = () => {
  const onCanvasLoaded = (canvas: HTMLCanvasElement) => {
    if (!canvas) {
      return;
    }

    const width = window.innerWidth;
    const height = window.innerHeight;

    // init scene
    const scene = new Scene();
    const camera = new PerspectiveCamera(
      75,
      canvas.clientWidth / canvas.clientHeight,
      0.1,
      1000
    );

    const renderer = new WebGLRenderer({ canvas: canvas, antialias: true });
    renderer.setClearColor('#d2d0d0');
    renderer.setSize(width, height);

    // ここでglbファイルを読み込んで設定します。
    let model = null;
    loader.load(
      url,
      function (gltf) {
        model = gltf.scene;
        model.name = 'model_with_cloth';
        model.scale.set(400.0, 400.0, 400.0);
        model.position.set(0, -400, 0);
        scene.add(model);
        console.log(model); // ここでmodelのオブジェクトデータの中身があることを確認できました。
      },
      function (error) { 
        console.log('An error happened'); // glbがローディング完了するまではエラーになる
        console.log(error);
      }
    );

    window.addEventListener('resize', () => handleResize({ camera, renderer }));

    renderer.render(scene, camera);
  };

  // handle resize
  const handleResize = ({ camera, renderer }: any) => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    camera.aspect = width / width;
    camera.updateProjectionMatrix();
    renderer.setSize(width, width);
  };
  useEffect(() => {
    return () => window.removeEventListener('resize', () => handleResize);
  });

  return <canvas ref={onCanvasLoaded} />;
};

export default Three;

App.tsx
略
const App = () => {
  return (
    <Suspense fallback={null}>
      <Three />
    </Suspense>
  );
};

結果としては、canvas（グレーの色にしている）のみが表示されてblenderの画像は表示されません。

試したこと

 let model = null;
    loader.load(
      url,
      function (gltf) {
        model = gltf.scene;
        model.name = 'model_with_cloth';
        model.scale.set(400.0, 400.0, 400.0);
        model.position.set(0, -400, 0);
        scene.add(gltf.scene);
        console.log(model);
      },
      function (error) { 
        console.log('An error happened'); // glbがローディング完了するまではエラーになる
        console.log(error);
      }
    );

ここの中身は色々と変えたりいじってみたのですが変わりませんでした。また３種類ほどのblenderファイルを入れ替えてみたのですが変わらずでした。