How do i set the width and height to 500 for mobile and 1100 for desktop screen sizes: import React, { useEffect, 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 { setGlobeReady } = useGlobe();  
    const router = useRouter();
    const globeRef = useRef();

    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 = { 3}
            hexPolygonMargin = {0.75}
            hexPolygonAltitude = {0.01}
            hexPolygonUseDots = {false}
            enablePointerInteraction ={false}
            onGlobeReady={() => setGlobeReady(true)}
            showAtmosphere = { true}
            atmosphereColor="#ffffff"
            atmosphereAltitude = { 0.1}
            backgroundColor="rgba(0, 0, 0, 0)" 
            globeImageUrl="//unpkg.com/three-globe/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={1100}
            height={1100}
            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;
My breakpoints are defined in the tailwinds config as:  screens: {
      sm: "640px",
      md: "768px",
      lg: "960px",
      xl: "1200px",
    },