useLoadScript React Hook needs data from a backend API request, but react hook can't be run conditionally - node.js

Question

I have attempted to hide my Google API key in my Node.js .env file. So I use axios to fetch it when I need it in my Map.js. I also use a useLoadScript React Hook which needs the API key in order to render the map.
However, when I do this I get this error:
"You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors."
This is because the apiKey is null for the first three renders and useLoadScript wants to run one time with the correct apiKey. So what I don't understand is how I can only run it one time when the apiKey has arrived from Node.js?
This is my first attempt:
import React from 'react';
import { GoogleMap, useLoadScript} from '#react-google-maps/api';
import useWindowDimensions from '../getWindowDimensions';
import './Map.css';
import axios from 'axios';
//coordinates to the house
const center = {lat: 38.15230, lng: -80.34552};
const zoom = 16;
const MapStyle = {
height: '60%',
width: '40%'
}
const Map_resized = {
height: '60%',
width: '80%'
}
const Map_resized_small = {
height: '415px',
width: '80%'
}
const GOOGLE_MAPS_LIBRARIES = ['places'];
function Map() {
const width = useWindowDimensions().width;
const [apiKey, setApiKey] = React.useState(null);
console.log(apiKey);
React.useEffect(() => {
axios.get("/googleMapsApiKey")
.then((res) => {setApiKey(res.data.key)})
.catch((error) => console.error(error));
}, []);
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: apiKey,
libraries: GOOGLE_MAPS_LIBRARIES
});
if (isLoaded) {
return (
<GoogleMap
mapContainerStyle={(width < 1152) ? (width < 629) ? Map_resized_small : Map_resized : MapStyle}
center={center}
zoom={zoom}
/>
);
}
else if (loadError) {
return (
<span>Error loading map!</span>
);
}
else {
return (
<span>Map Loading</span>
);
}
}
export default Map;
Error: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.
Then I tried to run useLoadScript only when the apiKey has arrived from the backend.
import React from 'react';
import { GoogleMap, useLoadScript} from '#react-google-maps/api';
import useWindowDimensions from '../getWindowDimensions';
import './Map.css';
import axios from 'axios';
//coordinates to the house
const center = {lat: 38.15230, lng: -80.34552};
const zoom = 16;
const MapStyle = {
height: '60%',
width: '40%'
}
const Map_resized = {
height: '60%',
width: '80%'
}
const Map_resized_small = {
height: '415px',
width: '80%'
}
const GOOGLE_MAPS_LIBRARIES = ['places'];
function Map() {
const width = useWindowDimensions().width;
const [apiKey, setApiKey] = React.useState(null);
console.log(apiKey);
React.useEffect(() => {
axios.get("/googleMapsApiKey")
.then((res) => {setApiKey(res.data.key)})
.catch((error) => console.error(error));
}, []);
if (apiKey) {
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: apiKey,
libraries: GOOGLE_MAPS_LIBRARIES
});
}
if (isLoaded) {
return (
<GoogleMap
mapContainerStyle={(width < 1152) ? (width < 629) ? Map_resized_small : Map_resized : MapStyle}
center={center}
zoom={zoom}
/>
);
}
else if (loadError) {
return (
<span>Error loading map!</span>
);
}
else {
return (
<span>Map Loading</span>
);
}
}
export default Map;
Error: React Hook "useLoadScript" is called conditionally. React Hooks must be called in the exact same order in every component render
I'm not really sure what else to try here other than put the google api key on the client side. But everything I research online tells me that it's bad practice. I know for sure that my key is arriving because I used console.log() to check.
[SOLUTION]
The trick was to use conditional functional components instead. I don't know if this is the best way to do it but this got rid of my warnings and errors.
import React from 'react';
import { GoogleMap, useLoadScript} from '#react-google-maps/api';
import useWindowDimensions from '../getWindowDimensions';
import './Map.css';
import axios from 'axios';
//coordinates to the house
const center = {lat: 40.15230, lng: -80.34552};
const zoom = 16;
const MapStyle = {
height: '60%',
width: '40%'
}
const Map_resized = {
height: '60%',
width: '80%'
}
const Map_resized_small = {
height: '415px',
width: '80%'
}
const GOOGLE_MAPS_LIBRARIES = ['places'];
function MapWithLoadScript({ apiKey }) {
const width = useWindowDimensions().width;
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: apiKey,
libraries: GOOGLE_MAPS_LIBRARIES,
});
if (isLoaded) {
return (
<GoogleMap
mapContainerStyle={(width < 1152) ? (width < 629) ? Map_resized_small : Map_resized : MapStyle}
center={center}
zoom={zoom}
/>
);
}
if (loadError) {
return <span>Error loading map!</span>;
}
return <span>Map Loading</span>;
}
function Map() {
const [apiKey, setApiKey] = React.useState(null);
console.log(apiKey);
React.useEffect(() => {
axios.get("/googleMapsApiKey")
.then((res) => {setApiKey(res.data.key)})
.catch((error) => console.error(error));
}, []);
if (apiKey === null) {
return <span>Loading API key...</span>;
}
else {
return <MapWithLoadScript apiKey={apiKey} />;
}
}
export default Map;