Issue with object rotation when using Threejs in React

Questions
1

I am using ThreeJS in React so I can keep using threejs in a format I am comfortable with. When using it I am having trouble getting me GLTF model to rotate in the animate function. I believe this has to do with scope but I am unsure how to resolve it. Does anyone have some suggestions to fixing this problem?
Here is the code

export default class Apps extends React.Component {
  constructor(props) {
    super(props);

    this.start = this.start.bind(this);
    this.stop = this.stop.bind(this);
    this.animate = this.animate.bind(this);
  }
  componentDidMount() {
    const width = this.mount.clientWidth;
    const height = this.mount.clientHeight;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    const spiral = new URL("../../assets/spiralTop.gltf", import.meta.url);
    const assetLoader = new GLTFLoader();
    var model;
    assetLoader.load(
      spiral.href,
      function (gltf) {
        model2 = gltf.scene;
        var newMaterial = new THREE.MeshStandardMaterial({ color: 0xff8282 });
        model2.traverse((o) => {
          if (o.isMesh) o.material = newMaterial;
        });
        scene.add(model2);
        model2.position.set(0, 0, -3);
        model2.receiveShadow = true;
        model2.scale.set(1.6, 1.6, 1.6);
      },
      undefined,
      function (error) {
        console.error(error);
      }
    );
    new THREE.MeshStandardMaterial({
        color: new THREE.Color(1, 0, 0)
    });
    camera.position.set(0.27, 0, 13.5);
    renderer.setClearColor("#000000");
    renderer.setSize(width, height);
    const spotLight = new THREE.SpotLight(0xffffff);
    scene.add(spotLight);
    spotLight.position.set(0, 0, 100);
    spotLight.castShadow = true;
    spotLight.angle = 0.2;
    spotLight.intensity = 0.9;
    this.spotLight = spotLight;
    this.scene = scene;
    this.camera = camera;
    this.renderer = renderer;
    this.spiral = spiral;
    this.assetLoader = assetLoader;
    this.material = material;
    this.mount.appendChild(this.renderer.domElement);
    this.start();
    window.addEventListener("resize", function () {
      camera.aspect = window.innerWidth / this.window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  }
  componentWillUnmount() {
    this.stop();
    this.mount.removeChild(this.renderer.domElement);
  }
  start() {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate);
    }
  }
  stop() {
    cancelAnimationFrame(this.frameId);
  }
  animate() {
    this.renderScene();
    this.model.rotation.y += 0.00015;
    this.frameId = window.requestAnimationFrame(this.animate);
  }
  renderScene() {
    this.renderer.render(this.scene, this.camera);
  }
  render() {
    return (
      <div
        style={{ width: "100vw", height: "100vh" }}
        ref={(mount) => {
          this.mount = mount;
        }}
      />
    );
  }
}
ReactDOM.render(<Apps />, document.getElementById("root"));
2

I think loadAsync would be a good choice when loading assets in threejs & react project.
Basically you can use it like thils.
useEffect(()=>{
(async()=>{
// Here you can declare all ThreeJS vars.
const model = (await new GLTFLoader().loadAsync(filePath)).scene
console.log(model)
})()

})