LoadScript removes css source

[emaborsa]

"dependencies": {
    "@react-google-maps/api": "^2.19.3",
    "classnames": "^2.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.5",
    "react-number-format": "^5.4.0",
    "react-router-dom": "^6.22.3",
    "react-select": "^5.8.0",
    "swr": "^2.2.5",
    "wretch": "^2.8.1"
  },

This is my index:

import { createRoot } from "react-dom/client";
import "./colors.css";
import App from "./components/App";
import "./global.css";

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(<App />);

The project works fine. When in my code the LoadScript is loaded it works, but when I move to anothe raect page (route), the global.css get lost.

<LoadScript
          googleMapsApiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
          language={auth.identity?.language}
          libraries={libraries}
          onError={() => {
            setMapError(true);
            setIsMapLoaded(true);
          }}
          onLoad={() => {
            setIsMapLoaded(true);
          }}
        >
          {isMapLoaded && !mapError && (
            <GoogleMap
              mapContainerStyle={{
                width: "100%",
                height: "100%",
                outline: "none",
              }}
              zoom={coordinates ? zoomCoordinates : zoomNoCoordinates}
              onLoad={onMapLoad}
              options={{
                disableDoubleClickZoom: true,
                mapTypeId: "satellite",
                mapId: "PROJECT_MAP_ID",
              }}
              onDblClick={onDblClick}
            />
          )}
        </LoadScript>

Here a short record:

If I use the jsApiLoader hook instead, I dont have the css problem, but it crashes when the language is cahnged:

  const { isLoaded: isMapLoaded, loadError: mapLoadError } = useJsApiLoader({
    googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
    libraries: libraries,
    language: auth.identity?.language,
  });

  useEffect(() => {
    setMapError(!!mapLoadError);
    setIsPageLoading(!isMapLoaded);
  }, [mapLoadError, isMapLoaded]);

Any idea?

[osama-bp]

I'm encountering the same issue. A quick workaround is to wrap the App component with the LoadScript component.