How to load gltf models in RCA-typescipt+babylonjs project?

I am trying to load .gltf model file in RCA-typescipt project but fails.

I ceate a .tsx file named SceneComponent, which includes engine, scene, and canvas:

    /* eslint-disable */
    import { Engine, Scene } from "@babylonjs/core";
    import React, { useEffect, useRef } from "react";
    /* eslint-disable */

    export default (props:any) => {
      const reactCanvas = useRef(null);
      const { antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, ...rest } = props;

      useEffect(() => {
        if (reactCanvas.current) {
          const engine = new Engine(reactCanvas.current, antialias, engineOptions, adaptToDeviceRatio);
          const scene = new Scene(engine, sceneOptions);
          if (scene.isReady()) {
            props.onSceneReady(scene);
          } else {
            scene.onReadyObservable.addOnce((scene) => props.onSceneReady(scene));
          }

          engine.runRenderLoop(() => {
            if (typeof onRender === "function") {
              onRender(scene);
            }
            scene.render();
          });

          const resize = () => {
            scene.getEngine().resize();
          };

          if (window) {
            window.addEventListener("resize", resize);
          }

          return () => {
            scene.getEngine().dispose();

            if (window) {
              window.removeEventListener("resize", resize);
            }
          };
        }
      }, [reactCanvas]);

      return <canvas ref={reactCanvas} {...rest} />;
    };

Then I use this component in my App.tsx file:

    /* eslint-disable */
    import React, { useEffect, useRef } from 'react';
    import './App.css';
    import { FreeCamera, Vector3, HemisphericLight, MeshBuilder, SceneLoader, Scene, Engine, AssetsManager } from '@babylonjs/core';
    import "@babylonjs/loaders/glTF";
    import { Nullable } from '@babylonjs/core/types';
    import SceneComponent from './components/SceneComponent';
    /* eslint-disable */

    import model from "./assets/model2/scene.gltf";

    const App: React.FC = () => {

      const onSceneReady = (scene: any) => {

        const canvas = scene.getEngine().getRenderingCanvas();
        const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
        camera.setTarget(Vector3.Zero());
        camera.attachControl(canvas, true);
        const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
        light.intensity = 0.7;

        // MeshBuilder.CreateBox("box", {}, scene);
        // console.log(scene)
        // SceneLoader.Append("./assets/model2/", "scene.gltf", scene, function (scene) {
        //   console.log(scene);
        // });
        SceneLoader.ImportMeshAsync(
          "",
          "./assets/model2/",
          "scene.gltf",
          scene,
        );
        console.log(scene)
      };

      const onRender = () => {

      };

      return (
        <div>
          <SceneComponent antialias onSceneReady={onSceneReady} onRender={onRender} id="my-canvas" />
        </div>
      );
    }

    export default App;

But When I tried to load gltf models in App.tsx, neither SceneLoader.Append() method nor SceneLoader.ImportMeshAsync() method can I load gltf model successfully, it showed nothing: picture1

If I just create a box in the scene with MeshBuilder.CreateBox("box", {}, scene);, the model can be seen : piture2

So how can I load gltf model file successfully? Any advice would be much appreciated!