Google Map renders empty on react

Question

i connected my react project to the google maps api using react-google-maps library and it shows the following without any errors:

map

my code:

import {
    GoogleMap,
    Marker,
    DirectionsRenderer,
    Circle,
    MarkerClusterer,
    useLoadScript
  } from "@react-google-maps/api";
import { useState, useMemo, useEffect, useRef } from "react";
import "./Map.css";


const API_KEY = xxxxx;

export default function Map() {


    const { isLoaded } = useLoadScript({
        id: 'google-map-script',
        googleMapsApiKey: API_KEY,
      });


    if (!isLoaded) return <div> Loading... </div>
    return(
            <GoogleMap zoom={10} center={{lat:100, lng: 100}} mapContainerClassName="mapContainer" >
                <Marker position={{lat:100, lng: 100}}></Marker>
            </GoogleMap>
    )
}

.mapContainer {
    width: 100%;
    height: 30vh;
}

any idea why it happens?