Google maps doens't load in my react app (feat, GoogleMapReact) - reactjs

Question

I'm trying to make a react app that loads a google map.
but somehow the map doesn't show and not an error was reported in console logs....
import React from 'react'
import GoogleMapReact from 'google-map-react'
import {Paper, Typography, useMediaQuery} from '#material-ui/core'
import LocationOnOutlinedIcon from '#material-ui/icons/LocationOnOutlined'
import Rating from '#material-ui/lab'
import useStyles from './styles'
const Map = () => {
const classes = useStyles()
const isMobile = useMediaQuery('(min-width:600px)')
const coordinates = { lat:0, lng: 0}
return (
<div className={classes.mapContainer}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'AIzaSyBrSAzFufdmJBVojpd7idemPVGp8HskFKY' }}
defaultCenter={coordinates}
center={coordinates}
defaultZoom={14}
margin={[50,50,50,50]}
>
</GoogleMapReact>
</div>
)
}
export default Map
ㄴ this is Map.js file
import Header from "./components/Header/Header";
import {List} from "./components/List/List";
import Map from "./components/Map/Map";
import {CssBaseline, Grid} from '#material-ui/core';
function App() {
return (
<div className="App">
<CssBaseline></CssBaseline>
<Header/>
<Grid container spacing={3} style={{ width: '100%'}}>
<Grid item xs={12} md={4}>
<List/>
</Grid>
<Grid item xs={12} md={8}>
<Map/>
</Grid>
</Grid>
</div>
);
}
export default App;
ㄴthis is App.js file
enter image description here
What's causing the error(if that is an error)?
j
How can I make the map show up in my app?