Google Maps Javascript API is not showing up on webpage

I am trying to utilise a Google Map API on my React/Javascript code within the ‘Contact Us’ component of my website however the map itself is not showing up. I believe the code is working as the “Loading…” statement appears when the map is loading however when it has loaded in nothing is showing up.

Here’s my code in the ContactUs.js file:

import React from "react";
import contactuscss from "./ContactUs.module.css";
import Map from "./Map.js";

function ContactUs() {
  return (
    <div className={contactuscss.container}>
      <h2 className={contactuscss.contactus}>CONTACT US</h2>

      <div className={contactuscss.address}>
        <p>Unit 14 Parramatta Business Centre</p>
        <p>2 O'Connell Street</p>
        <p>Parramatta, NSW 2150</p>
        <p>Tel: +61 435 400 290</p>
      </div>

      <form>
        <div className={contactuscss.inputcontainer}>
          <input
            className={contactuscss.nameinput}
            type="text"
            id="name"
            name="name"
            placeholder="Name"
          />

          <input
            className={contactuscss.emailinput}
            type="text"
            id="email"
            name="email"
            placeholder="Email"
          />

          <input
            className={contactuscss.phoneinput}
            type="phone"
            id="phone"
            name="phone"
            placeholder="Phone"
          />

          <textarea
            className={contactuscss.textinput}
            id="message"
            name="message"
            rows="6"
            placeholder="Type your message here..."
          ></textarea>

          <button className={contactuscss.submitbutton} type="submit">
            Submit
          </button>
        </div>

        <div>
          <Map />
        </div>
      </form>
    </div>
  );
}

export default ContactUs;

And here’s the code in the Map.js file:

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

function Map() {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
  });

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

  return (
    <GoogleMap
      zoom={10}
      center={{ lat: 44, lng: -80 }}
      mapContainerClassName={{ width: "100%", height: "100vh" }}
    ></GoogleMap>
  );
}

export default Map;

Here’s whats in my .env.local file:

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY="AIzaSyCH4EPZrF5cvUmM9luEsNdOehQuRyJgAzk"

I’m not too sure what is wrong – I’ve also utilised the most up to date tutorial on youtube for how to upload this API on to my web page.