The Google Map is not rendering but instead get a blank container

I am creating a React App and I am trying to render a Google Map. I activated the Billing for this project but it still doesn't work

The MapTest component:

import { useMemo } from "react";
import {GoogleMap, useLoadScript, Marker} from "@react-google-maps/api";

export default function MapTest() {
    const { isLoaded } = useLoadScript({
        googleMapsApiKey: my-api-key
    })

    if (!isLoaded) return <div>Loading...</div>
    return <Map />
}

function Map() {
    return <GoogleMap
        zoom={10}
        center={{lat: 44, lng: -80}}
        mapContainerClassNams="map-container"
    ></GoogleMap>
}

The Contact component (not all):

import MapTest from "./MapTest"

export default function Contact() {
    return (
      <div className="contact-main-container">
        <ContactMain />
        <MapTest />
      </div>
    )
}

If I reload the page I can see for a few milliseconds that "Loading..." that is returned in the MapTest component.