The globe renders on initial mount but does not rerender its arcs after navigating to a different page and coming back to it....i am using next js which has fast refresh and i dont know how to make the component load as it did in the initial mount(full refresh / page reload) in the fast refresh too ie: as i navigate between pageProps: 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 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();
    let windowHalfX = windowWidth / 2;
    let windowHalfY = windowHeight / 2;


    // 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);
            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;       _app.jsx: import { AnimatePresence, motion } from "framer-motion";
import { useRouter } from "next/router";
import Layout from "../components/Layout";
import Transition from "../components/Transition";

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

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

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

export default MyApp;       index.jsx: import { motion } from "framer-motion";
import dynamic from 'next/dynamic';
import { useState, useEffect, useRef } from "react";
import Bulb from "../components/Bulb";
import ProjectsBtn from "../components/ProjectsBtn";
import TrackVisibility from 'react-on-screen'; 
import { fadeIn } from "../variants";

const GlobeComponent = dynamic(() => import("../components/GlobeComponent"), { ssr: false });


const Home = () => {
  
  const [loopNum, setLoopNum] = useState(0);
  const [isDeleting, setIsDeleting] = useState(false);
  const [text, setText] = useState('');
  const [delta, setDelta] = useState(300 - Math.random() * 100);
  const [index, setIndex] = useState(1);
  const toRotate = ["Digital Reality", "Modern Websites", "Global Brands"];
  const period = 750;

  useEffect(() => {
    let ticker = setInterval(() => {
      tick();
    }, delta);

    return () => { clearInterval(ticker) };
  }, [text])

  const tick = () => {
    let i = loopNum % toRotate.length;
    let fullText = toRotate[i];
    let updatedText = isDeleting ? fullText.substring(0, text.length - 1) : fullText.substring(0, text.length + 1);

    setText(updatedText);

    if (isDeleting) {
      setDelta(prevDelta => prevDelta / 2);
    }

    if (!isDeleting && updatedText === fullText) {
      setIsDeleting(true);
      setIndex(prevIndex => prevIndex - 1);
      setDelta(period);
    } else if (isDeleting && updatedText === '') {
      setIsDeleting(false);
      setLoopNum(loopNum + 1);
      setIndex(1);
      setDelta(250);
    } else {
      setIndex(prevIndex => prevIndex + 1);
    }
  }

  return (
    <div className="bg-primary/30 h-full overflow-x-auto">
      {/* text */}
      <div className="w-full h-full pt-20">
        <div className="text-center flex flex-col justify-center xl:pt-40 xl:text-left h-full container mx-auto">
          {/* title */}
          <motion.h1
            variants={fadeIn("down", 0.2)}
            initial="hidden"
            animate="show"
            exit="hidden"
            className="h1 my-text"
          >
          <TrackVisibility>
            {({ isVisible }) =>
            <div className={isVisible ? "animate__animated animate__fadeIn" : "text-center flex flex-col justify-center"}>
            Transforming Your <br /> Ideas Into{" "}<br />
                  <span className="text-accent typewriter" data-rotate='[ "Digital Reality", "Modern Websites", "Global Brands"]'>
                    {text}
                  </span>
            </div>}
          </TrackVisibility>
          </motion.h1>

          {/* subtitle */}
          <motion.p
            variants={fadeIn("down", 0.3)}
            initial="hidden"
            animate="show"
            exit="hidden"
            className="max-w-sm xl:max-w-xl mx-auto xl:mx-0 mb-10 xl:mb-16"
          >
            With a keen eye for design and a passion for code, I bring visions to life with precision and polish. Let's collaborate to create a stunning online presence that showcases your unique brand and leaves a lasting impression. Elevate your digital game with a developer who is committed to quality and innovation.    
          </motion.p>

          {/* btn */}
          <div className="flex justify-center xl:hidden relative">
            <ProjectsBtn />
          </div>
          <motion.div
            variants={fadeIn("down", 0.4)}
            initial="hidden"
            animate="show"
            exit="hidden"
            className="hidden xl:flex"
          >
            <ProjectsBtn />
          </motion.div>
        </div>
       
      </div>
      {/* image */}
      <div className="w-[100%] xl:w-[50%] md:w-[100%] h-full pt-10 xl:mr-10 absolute xl:right-0 bottom-0">
        {/* bg img */}
        <div
          role="img"
          className="bg-none xl:bg-right xl:bg-no-repeat w-full h-full bg-cover bg-center relative"
          aria-hidden
        >

        <motion.div
          variants={fadeIn("up", 0.5)}
          initial="hidden"
          animate="show"
          exit="hidden"
          transition={{ duration: 1, ease: "easeInOut" }}
          className="w-full h-full max-w-[100%] max-h-[100%] absolute"
        >
          <div className="globe-container">
              <GlobeComponent
                globeWidth={600}
                globeHeight={600}
                windowWidth={1000}
                windowHeight={1000}
              />
          </div>
          
        </motion.div> 
        </div>
       </div>
       <Bulb /> 
    </div>
  );
};

export default Home;