I mimicked the code from another project I did to set google maps up on a react site, but the map isn’t displaying. I checked the google API request history online and I can see I am succesfully talking to google maps, but the map fails to show up on the page. I think the code might be okay to delete, but when I do nothing changes, so I left it in for now.

Here is the React page:

import React from "react";
import { APIProvider, Map, Marker } from '@vis.gl/react-google-maps';
import '../index.css';

function Vibes() {
    const tompkins = { lat: 40.72606737678102, lng: -73.98333751481684 }

    return (
        <>
            <div id='map'>
                <APIProvider apiKey={import.meta.env.VITE_GOOGLE_KEY} onLoad={() => console.log('Maps API has loaded.')}>
                    <Map defaultCenter={tompkins} defaultZoom={13} map-id="4cdb05ac35ed1b8">
                        <Marker position={tompkins} />
                    </Map>
                    <gmp-map defaultCenter={tompkins} zoom={13} map-id="DEMO_MAP_ID">
                        <gmp-advanced-marker position={tompkins} title="Union Square"></gmp-advanced-marker>
                    </gmp-map>
                </APIProvider>
            </div>
            <h2>Test</h2>
        </>
    )
}

export default Vibes;

and here is the relevant css:

#map {
  width: 100%;
  height: 100%;
  min-width: 400px;
  min-height: 400px;
  margin: 0% 1%;
}

Here is an image of the empty space where the map will go:
enter image description here

And the HTML DOM:
enter image description here

I would love any insight as to why this isn’t working on this project!