Problem with initializing dat.GUI with react

hey, guys noob alert here I have an issue of integrating dat.GUI with react component I tried loading it after the objects loaded but it did not work crying for any suggestions here is the code

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import * as THREE from "three";

import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper";
import { Noise } from "noisejs";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as dat from "dat.gui";

const style = {
height: 800,
width: 600
 };


class App extends Component {
 componentDidMount() {
  this.sceneSetup();
  this.startAnimationLoop();
  window.addEventListener("resize", this.handleWindowResize);
}

 componentWillUnmount() {
  window.removeEventListener("resize", this.handleWindowResize);
  window.cancelAnimationFrame(this.requestID);
  this.controls.dispose();
}


sceneSetup = () => {
//GUI
this.params = {
  spot: {
    enable: false,
    color: 0xffffff,
    distance: 0,
    angle: Math.PI / 3,
    penumbra: 0,
    helper: false,
    moving: false,
  },
  area: {
    enable: false,
    color: 0xffffff,
    width: 10,
    height: 10,
    helper: false,
    moving: false,
  },
 };
const width = this.el.clientWidth;
const height = this.el.clientHeight;
this.scene = new THREE.Scene();

//init Clock
this.clock = new THREE.Clock();

//camera
this.camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
this.camera.position.set(0, 1, 15); //wide position
this.camera.lookAt(0, 0, 0);

//objects
const geometry = new THREE.SphereGeometry(1, 20, 15);
const material = new THREE.MeshStandardMaterial({ envMap: envMap });
const sphere = new THREE.Mesh(geometry, material);
let ball;
for (let x = -3; x <= 3; x += 2) {
  for (let y = -3; y <= 3; y += 2) {
    for (let z = -3; z <= 3; z += 2) {
      ball = sphere.clone();
      ball.position.set(x, y, z);
      this.scene.add(ball);
    }
  }
}
this.addGUI();

//lights
const ambient = new THREE.HemisphereLight(0xffffff, 0xaaaa66, 0.35);
this.scene.add(ambient);

//Add lights here
this.lights = {};
this.lights.spot = new THREE.SpotLight();
this.lights.spot.visible = false;
this.lights.spot.position.set(1, 10, 1);
this.lights.spotHelper = new THREE.SpotLightHelper(this.lights.spot);
this.lights.spotHelper.visible = false;
this.scene.add(this.lights.spotHelper);
this.scene.add(this.lights.spot);

this.lights.areaParent = new THREE.Object3D();
this.lights.area = new THREE.RectAreaLight();
this.lights.area.visible = false;
this.lights.area.position.set(0, 8, 0);
this.lights.area.lookAt(0, 0, 0);
this.lights.areaHelper = new RectAreaLightHelper(this.lights.area);
this.lights.areaHelper.visible = false;
this.lights.area.add(this.lights.areaHelper);
this.scene.add(this.lights.areaParent);
this.lights.areaParent.add(this.lights.area);

//render
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(width, height);
this.el.appendChild(this.renderer.domElement); 

//controls
this.controls = new OrbitControls(this.camera, this.el);
this.controls.target.set(0, 0, 0);
this.controls.update();
};

addGUI = () => {
console.log("gui");
this.gui = new dat.GUI({ name: "My GUI" });
const spot = this.gui.addFolder("Spot");
spot.open();
spot.add(this.params.spot, "enable").onChange((value) => {
  this.lights.spot.visible = value;
});
spot
  .addColor(this.params.spot, "color")
  .onChange((value) => (this.lights.spot.color = new THREE.Color(value)));
spot
  .add(this.params.spot, "distance")
  .min(0)
  .max(20)
  .onChange((value) => {
    this.lights.spot.distance = value;
    this.lights.spotHelper.update();
  });
spot
  .add(this.params.spot, "angle")
  .min(0.1)
  .max(1.57)
  .step(0.1)
  .onChange((value) => {
    this.lights.spot.angle = value;
    this.lights.spotHelper.update();
  });
spot
  .add(this.params.spot, "penumbra")
  .min(0)
  .max(1)
  .step(0.05)
  .onChange((value) => (this.lights.spot.penumbra = value));
spot
  .add(this.params.spot, "helper")
  .onChange((value) => (this.lights.spotHelper.visible = value));
spot.add(this.params.spot, "moving");

const area = this.gui.addFolder("RectArea");
//area.open();
area.add(this.params.area, "enable").onChange((value) => {
  this.lights.area.visible = value;
});
area
  .addColor(this.params.area, "color")
  .onChange((value) => (this.lights.area.color = new THREE.Color(value)));
area
  .add(this.params.area, "width")
  .min(1)
  .max(15)
  .onChange((value) => {
    this.lights.area.width = value;
    this.lights.areaHelper.update();
  });
area
  .add(this.params.area, "height")
  .min(1)
  .max(15)
  .onChange((value) => {
    this.lights.area.height = value;
    this.lights.areaHelper.update();
  });
area
  .add(this.params.area, "helper")
  .onChange((value) => (this.lights.areaHelper.visible = value));
area.add(this.params.area, "moving");
};

//UPDATE
startAnimationLoop = () => {
this.renderer.render(this.scene, this.camera);
this.requestID = window.requestAnimationFrame(this.startAnimationLoop);
//get the vertices
const time = this.clock.getElapsedTime();
const delta = Math.sin(time) * 5;
if (this.params.area.moving) {
  this.lights.areaParent.rotation.z = time;
  this.lights.areaHelper.update();
  }
if (this.params.spot.moving) {
  this.lights.spot.position.x = delta;
  this.lights.spotHelper.update();
   }
 };

//RISIZE
handleWindowResize = () => {
const width = this.el.clientWidth;
const height = this.el.clientHeight;
this.renderer.setSize(width, height);
this.camera.aspect = width / height;
this.scene.add(this.camera);
this.camera.updateProjectionMatrix();
   };

render() {
return (
    <div>
    <div style={style} ref={(ref) => (this.el = ref)} />
  </div>
  );
 }
}



   return (
  <>
    <button
      onClick={() =>
        this.setState((state) => ({ isMounted: !state.isMounted }))
      }
    >
      {isMounted ? "Unmount" : "Mount"}
    </button>
    {isMounted && <App />}
    {isMounted && <div>Scroll to zoom, drag to rotate</div>}
  </>
      );
    }
 }

export default Container;`

Try Dynamic Import

there’s also leva, much better option: GitHub - pmndrs/leva: 🌋 React-first components GUI

btw you can let react render towards threejs directly with react-three-fiber just like react-dom renders to the dom. this is fundamentally what react is for. there is little sense in doing what do above, it’s creating a gap: no interaction, no eco system, no integration into react, state, context, routes, etc.