parameter "window.google.maps" used outside of "return" causes an error React Js

Question

Below you will see the code that works without errors and the code that gives an error, respectively. I want to use the code you see in the 2nd example, but I get the "Uncaught TypeError: Cannot read properties of undefined (reading 'maps')" error. How do I solve this?

working:

import Icon from '../../assets/images/icon.png';
import OtherIcon from '../../assets/images/otherIcon.png';

const myComponent = () => {
    
    const [markers, setMarkers] = useState([coordinatesList])

    return (
        <>
            <GoogleMap>
                {
                    markers.map((marker) => (
                        <Marker 
                            position={marker.latlng}
                            icon={{
                                url: Icon,
                                scaledSize: new window.google.maps.Size(24, 24),
                                anchor: new window.google.maps.Point(12, 12),
                            }}
                        />
                    ))
                }
                {
                  otherMarkers.map...
                }
                {
                  etc
                }

            </GoogleMap>
        </>
    );
}

not working but i want:

import Icon from '../../assets/images/icon.png';
import OtherIcon from '../../assets/images/otherIcon.png';

const myComponent = () => {

    const [markers, setMarkers] = useState([coordinatesList])

    const markersVariable = markers.map((marker) => (
        <Marker
            position={marker.latlng}
            icon={{
                url: Icon,
                scaledSize: new window.google.maps.Size(24, 24),
                anchor: new window.google.maps.Point(12, 12),
            }}
        />
    ));

    const otherItems .... etc

    return (
        <>
            <GoogleMap>
                {
                    [markersVariable, otherMarkersVariable, polygonVariable... etc]
                }
            </GoogleMap>
        </>

    );
}

I think the cause of the error: "new window.google.maps..." parameter. I tryed:

const [googleMaps, setGoogleMaps] = useState(null);

useEffect(() => {
    setGoogleMaps(window.google.maps);
  }, []);

// and use the googleMaps object instead of window.google.maps

but its not be solve.