When i route change to a different page and come back to the index page which shows the globe component i get the following error: Unhandled Runtime Error
Error: Rendered more hooks than during the previous render.

Source
components\GlobeComponent.jsx (63:14) @ GlobeComponent

  61 | }
  62 | 
> 63 | useEffect(() => {
     |          ^
  64 |     // Initialize core ThreeJS elements
  65 |     function init() {
  66 |         // Initialize renderer   .My code: GlobeComponent.jsx: import React, { useEffect, useRef } from 'react';
import {
    WebGLRenderer,
    Scene,
    AmbientLight,
    DirectionalLight,
    Color,
    Fog,
    PerspectiveCamera,
    PointLight
} from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { createGlowMesh } from 'three-glow-mesh';
import ThreeGlobe from "three-globe";
import { useGlobalState } from '../components/globe/GlobeContext';
import countries from './files/globe-data-min.json';
import travelHistory from './files/my-flights.json';
import airportHistory from './files/my-airports.json';


let mouseX = 0;
let mouseY = 0;

let timeoutId;
let renderer, camera, scene, controls;
let Globe;
let frameId;


const GlobeComponent = ({ globeWidth, globeHeight, windowWidth, windowHeight }) => {
    const containerRef = useRef();
    const { isGlobeVisible } = useGlobalState();
    let windowHalfX = windowWidth / 2;
    let windowHalfY = windowHeight / 2;
    
    if (!isGlobeVisible) {
        return null;
    }

    // Event listeners
    function onWindowResize() {
        camera.aspect = windowWidth / windowHeight;
        camera.updateProjectionMatrix();
        windowHalfX = windowWidth;
        windowHalfY = windowHeight;
        renderer.setSize(windowWidth, windowHeight);
    }

    function onMouseMove(event) {
        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;
        // console.log("x: " + mouseX + " y: " + mouseY);
    }

    // Animation
    function animate() {
        camera.lookAt(scene.position);
        controls.update();
        renderer.render(scene, camera);
        frameId = requestAnimationFrame(animate);
    }

    useEffect(() => {
        // Initialize core ThreeJS elements
        function init() {
            // Initialize renderer
            renderer = new WebGLRenderer({ antialias: true, alpha: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(globeWidth, globeHeight);
            renderer.setClearColor(0x000000, 0);
            containerRef.current.appendChild(renderer.domElement);

            // Initialize scene, light
            scene = new Scene();
            scene.add(new AmbientLight(0xbbbbbb, 0.4));

            // Initialize camera, light
            camera = new PerspectiveCamera();
            camera.aspect = globeWidth / globeHeight;
            camera.updateProjectionMatrix();

            var dLight = new DirectionalLight(0xffffff, 0.8);
            dLight.position.set(-800, 2000, 400);
            camera.add(dLight);

            var dLight1 = new DirectionalLight(0x7982f6, 1);
            dLight1.position.set(-200, 500, 200);
            camera.add(dLight1);

            var dLight2 = new PointLight(0x8566cc, 0.5);
            dLight2.position.set(-200, 500, 200);
            camera.add(dLight2);

            camera.position.z = 400;
            camera.position.x = 0;
            camera.position.y = 0;

            scene.add(camera);

            // Additional effects
            scene.fog = new Fog(0x535ef3, 400, 2000);

            // Helpers
            // const axesHelper = new THREE.AxesHelper(800);
            // scene.add(axesHelper);
            // var helper = new THREE.DirectionalLightHelper(dLight);
            // scene.add(helper);
            // var helperCamera = new THREE.CameraHelper(dLight.shadow.camera);
            // scene.add(helperCamera);

            // Initialize controls
            controls = new OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dynamicDampingFactor = 0.01;
            controls.enablePan = false;
            controls.minDistance = Math.min(globeWidth, globeHeight) / 2;
            controls.maxDistance = Math.min(globeWidth, globeHeight) / 2;
            controls.rotateSpeed = 0.8;
            controls.zoomSpeed = 1;
            controls.autoRotate = false;

            controls.minPolarAngle = Math.PI / 3.5;
            controls.maxPolarAngle = Math.PI - Math.PI / 3;

        }

        // Initialize the Globe
        function initGlobe() {
            // Initialize the Globe
            Globe = new ThreeGlobe({
                waitForGlobeReady: true,
                animateIn: true,
            })
                .hexPolygonsData(countries.features)
                .hexPolygonResolution(3)
                .hexPolygonMargin(0.7)
                .showAtmosphere(true)
                .atmosphereColor("#ffffff")
                .atmosphereAltitude(0.1)
                .hexPolygonColor((e) => {
                    if (
                        ["KEN", "CHN", "FRA", "ZAF", "JPN", "USA", "AUS", "CAN"].includes(
                            e.properties.ISO_A3
                        )
                    ) {
                        return "rgba(255,255,255, 1)";
                    } else return "rgba(255,255,255, 0.5)";
                });

            // NOTE Arc animations are followed after the globe enters the scene
            timeoutId = setTimeout(() => {
                Globe.arcsData(travelHistory.flights)
                    .arcColor((e) => {
                        return e.status ? "#9cff00" : "#ff2e97";
                    })
                    .arcAltitude((e) => {
                        return e.arcAlt;
                    })
                    .arcStroke((e) => {
                        return e.status ? 0.5 : 0.3;
                    })
                    .arcDashLength(0.9)
                    .arcDashGap(4)
                    .arcDashAnimateTime(1000)
                    .arcsTransitionDuration(1000)
                    .arcDashInitialGap((e) => e.order * 1)
                    .labelsData(airportHistory.airports)
                    .labelColor(() => "#ffffff")
                    .labelDotOrientation((e) => {
                        return e.text === "NGA" ? "top" : "right";
                    })
                    .labelDotRadius(0.35)
                    .labelSize((e) => e.size)
                    .labelText("city")
                    .labelResolution(6)
                    .labelAltitude(0.01)
                    .pointsData(airportHistory.airports)
                    .pointColor(() => "#ffffff")
                    .pointsMerge(true)
                    .pointAltitude(0.07)
                    .pointRadius(0.10);
            }, 1000);

            Globe.rotateX(-Math.PI * (1 / 50));
            Globe.rotateY(-Math.PI * (1 / 9));
            Globe.rotateZ(-Math.PI / 60);
            const globeMaterial = Globe.globeMaterial();
            globeMaterial.color = new Color(0x3a228a);
            globeMaterial.emissive = new Color(0x220038);
            globeMaterial.emissiveIntensity = 0.1;
            globeMaterial.shininess = 0.7;

            // NOTE Cool stuff
            // globeMaterial.wireframe = true;

            scene.add(Globe);
        }

        init();
        initGlobe();
        onWindowResize();
        animate();

        window.addEventListener('resize', onWindowResize, false);
        renderer.domElement.addEventListener('mousemove', onMouseMove);

        console.log("Initializing globe animation");


        return () => {
            clearTimeout(timeoutId);
            console.log({timeoutId})
            window.removeEventListener('resize', onWindowResize);
            renderer.domElement.removeEventListener('mousemove', onMouseMove);
            cancelAnimationFrame(frameId);

            if (containerRef.current) {
                // Perform more thorough clean-up here

                // Dispose of the scene's children
                while (scene.children.length > 0) {
                    const object = scene.children[0];
                    if (object.dispose) {
                        object.dispose();
                    }
                    scene.remove(object);
                }

                // Dispose of the renderer and any associated resources
                renderer.dispose();

                // Dispose of any controls, if necessary
                if (controls && controls instanceof OrbitControls && controls.dispose) {
                    controls.dispose();
                }

                if (renderer.domElement.parentNode === containerRef.current) {
                    // Remove the renderer DOM element
                    containerRef.current.removeChild(renderer.domElement);
                }

            }
        };
    }, []);
    

    return <div ref={containerRef} />;

};

export default GlobeComponent;    GlobeContext.js: import React, { createContext, useState, useContext } from 'react';

const GlobalStateContext = createContext(null);

export const useGlobalState = () => useContext(GlobalStateContext);

export const GlobalStateProvider = ({ children }) => {
    const [isGlobeVisible, setGlobeVisible] = useState(false);

    return (
        <GlobalStateContext.Provider value={{ isGlobeVisible, setGlobeVisible }}>
            {children}
        </GlobalStateContext.Provider>
    );
};
  _app.jsx: import { AnimatePresence, motion } from "framer-motion";
import { useRouter } from "next/router";
import Layout from "../components/Layout";
import Transition from "../components/Transition";
import { GlobalStateProvider } from '../components/globe/GlobeContext';

import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  return (
    <GlobalStateProvider>
      <Layout>
        <AnimatePresence mode="wait">
          <motion.div key={router.route} className="h-full">
            <Transition />
            <Component {...pageProps} />
          </motion.div>
        </AnimatePresence>
      </Layout>
    </GlobalStateProvider>
  );
}

export default MyApp;    index.jsx: ....const Home = () => {
  const { setGlobeVisible } = useGlobalState();....useEffect(() => {
    // When the component mounts, set the Globe to be visible.
    setGlobeVisible(true);
    return () => {
      // When the component unmounts, set the Globe to be invisible.
      setGlobeVisible(false);
    };
  }, [setGlobeVisible]); .....<GlobeComponent
                globeWidth={600}
                globeHeight={600}
                windowWidth={1000}
                windowHeight={1000}
              />