Cannot read properties of null (reading 'useEffect') threejs

Hi i am new in threejs and reactjs, i am trying to put threejs in my code. however im getting "Cannot read properties of null (reading 'useEffect')" not sure which one did i missed. please help. really appreciate it

Thank you

This is the code:

https://codesandbox.io/s/silly-snow-o0mv61?file=/src/App.js:0-3565

import React, { useEffect } from "react";
import * as THREE from "three";

useEffect(() => {
  let mousePos = { x: 0.5, y: 0.5 };
  document.addEventListener("mousemove", function (event) {
    mousePos = {
      x: event.clientX / window.innerWidth,
      y: event.clientY / window.innerHeight
    };
  });
  let phase = 0;

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    95,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 30;

  const canvas = document.getElementById("myThreeJsCanvas");

  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const boxSize = 0.2;
  const geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
  const materialGreen = new THREE.MeshBasicMaterial({
    transparent: true,
    color: 0xff0000,
    opacity: 0.4,
    side: THREE.DoubleSide
  });

  const pitchSegments = 60;
  const elevationSegments = pitchSegments / 2;
  const particles = pitchSegments * elevationSegments;
  const side = particles ** 1 / 3;

  const radius = 16;

  const parentContainer = new THREE.Object3D();
  scene.add(parentContainer);

  function posInBox(place) {
    return (place / side - 0.5) * radius * 1.2;
  }
  for (let p = 0; p < pitchSegments; p++) {
    const pitch = (Math.PI * 2 * p) / pitchSegments;
    for (let e = 0; e < elevationSegments; e++) {
      const elevation = Math.PI * (e / elevationSegments - 0.5);
      const particle = new THREE.Mesh(geometry, materialGreen);

      parentContainer.add(particle);

      const dest = new THREE.Vector3();
      dest.z = Math.sin(pitch) * Math.cos(elevation) * radius;
      dest.x = Math.cos(pitch) * Math.cos(elevation) * radius;
      dest.y = Math.sin(elevation) * radius;

      particle.position.x = posInBox(parentContainer.children.length % side);
      particle.position.y = posInBox(
        Math.floor(parentContainer.children.length / side) % side
      );
      particle.position.z = posInBox(
        Math.floor(parentContainer.children.length / side ** 2) % side
      );
      console.log(
        side,
        parentContainer.children.length,
        particle.position.x,
        particle.position.y,
        particle.position.z
      );
      particle.userData = {
        dests: [dest, particle.position.clone()],
        speed: new THREE.Vector3()
      };
    }
  }

  function render() {
    phase += 0.002;
    for (let i = 0, l = parentContainer.children.length; i < l; i++) {
      const particle = parentContainer.children[i];
      const dest = particle.userData.dests[
        Math.floor(phase) % particle.userData.dests.length
      ].clone();
      const diff = dest.sub(particle.position);
      particle.userData.speed.divideScalar(1.02); // Some drag on the speed
      particle.userData.speed.add(diff.divideScalar(400)); // Modify speed by a fraction of the distance to the dest
      particle.position.add(particle.userData.speed);
      particle.lookAt(dest);
    }

    parentContainer.rotation.y = phase * 3;
    parentContainer.rotation.x = (mousePos.y - 0.5) * Math.PI;
    parentContainer.rotation.z = (mousePos.x - 0.5) * Math.PI;

    renderer.render(scene, camera);
    window.requestAnimationFrame(render);
  }
  render();
}, []);

function App() {
  return (
    <div className="w-screen h-screen text-white">
      <div>
        <canvas id="myThreeJsCanvas" />
      </div>
    </div>
  );
}

export default App;