Optimize the performance of the following globe component: import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
import Globe from 'react-globe.gl';
import * as THREE from 'three';
import { useRouter } from 'next/router';
import { useGlobe } 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'; 


const GlobeComponent = () => {
    const [arcsData, setArcsData] = useState([]);
    const [hexPolygonResolution, setHexPolygonResolution] = useState(3);
    const { setGlobeReady } = useGlobe();  
    const router = useRouter();
    const globeRef = useRef();
    const [dimensions, setDimensions] = useState({ width: 500, height: 500 });

    useLayoutEffect(() => {
        // Function to update the dimensions state based on the window size
        const handleResize = () => {
            const isDesktop = window.matchMedia("(min-width: 768px)").matches;
            if (window.matchMedia("(min-width: 1200px)").matches) {
                // If the screen width is larger than or equal to ‘lg’ breakpoint, set to desktop size
                setDimensions({ width: 1000, height: 1000 });
            } else if (window.matchMedia("(min-width: 960px)").matches) {
                // If the screen width is larger than or equal to ‘lg’ breakpoint, set to desktop size
                setDimensions({ width: 800, height: 800 });
            } else if (window.matchMedia("(min-width: 768px)").matches) {
                // If the screen width is larger than or equal to ‘lg’ breakpoint, set to desktop size
                setDimensions({ width: 700, height: 700 });
            } else if (window.matchMedia("(min-width: 425px)").matches) {
                // If the screen width is larger than or equal to ‘lg’ breakpoint, set to desktop size
                setDimensions({ width: 400, height: 400 });
            } else if (window.matchMedia("(min-width: 375px)").matches) {
                // If the screen width is larger than or equal to ‘lg’ breakpoint, set to desktop size
                setDimensions({ width: 350, height: 350 });
            } else {
                // If smaller, set to mobile size
                setDimensions({ width: 320, height: 320 });
            }
            setHexPolygonResolution(isDesktop ? 3 : 2); 
        };

        // Set the initial globe size on component mount
        handleResize();

        // Add event listener for window resize
        window.addEventListener('resize', handleResize);

        // Remove event listener on cleanup
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    useEffect(() => {
        // Check if the globe instance is loaded
        if (globeRef && globeRef.current) {
                const kenyaCoordinates = {
                    lat: 2.286389, // latitude for Nairobi, Kenya
                    lng: 18.82023 // longitude for Nairobi, Kenya
                   
                };
                globeRef.current.pointOfView(kenyaCoordinates, 3000); // Animate the camera movement over 3000ms (3 seconds)
        }
    }, []);

    useEffect(() => {
        const handleRouteChange = () => {
            // You could update state here to ensure fresh data is fetched when a route changes
            setArcsData(travelHistory.flights);
        };

        router.events.on('routeChangeComplete', handleRouteChange);

        // Fetch the initial data
        setArcsData(travelHistory.flights);

        return () => {
            router.events.off('routeChangeComplete', handleRouteChange);
        };
    }, [router.events]);

    return (
        <Globe
            ref={globeRef}
            hexPolygonsData = { countries.features }
            hexPolygonResolution={hexPolygonResolution}
            hexPolygonMargin = {0.75}
            hexPolygonAltitude = {0.01}
            hexPolygonUseDots = {false}
            enablePointerInteraction ={false}
            onGlobeReady={() => {
                setGlobeReady(true);
            }}
            showAtmosphere = { true}
            atmosphereColor="#ffffff"
            atmosphereAltitude = { 0.12}
            backgroundColor="rgba(0, 0, 0, 0)" 
            globeImageUrl="//unpkg.com/three-globe@2.31.0/example/img/earth-dark.jpg"            
            hexPolygonColor = {(e) => {
            return ["KEN", "CHN", "FRA", "ZAF", "JPN", "USA", "AUS", "CAN"].includes(e.properties.ISO_A3)
                ? "#9cff00"
            : "rgba(255, 255, 255, 0.5)";
            }}
            width={dimensions.width}
            height={dimensions.height}
            arcsData={arcsData}
            arcColor = {(e) => {
                return e.status ? "#9cff00" : "#f13024";
            }}
            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 = {1.1}
            labelText = {"city" }
            labelResolution = { 6}
            labelAltitude = { 0.07}
            pointsData = { airportHistory.airports }
            pointColor={() => "#ffffff"}
            pointsMerge = { true}
            pointAltitude = { 0.07}
            pointRadius = { 0.10}
        />
    );
};

export default GlobeComponent;