React.jsでGoogleMapReactを用いて地図を表示したいですが、Error: Invalid LatLng object: (NaN, NaN)にあります。

前提

React.jsで地図を表示し、その上に行きたいお店などを示すためのシステムを作ってみたいです。

実現したいこと

GoogleMapReact（GoogleMap for Javascript）を用いてページに地図を表示したいです。

発生している問題・エラーメッセージ

以下のソースを実行すると、Error: Invalid LatLng object: (NaN, NaN)というエラーが表示され、画面の上にあるメッセージ「1 of 7 errors on the page」の数字が増えます

Error: Invalid LatLng object: (NaN, NaN)

該当のソースコード

Javascript
1import React from 'react';
2import GoogleMapReact from 'google-map-react';
3import { Paper, Typography, useMediaQuery } from '@material-ui/core';
4import LocationOnOutlinedIcon from '@material-ui/icons/LocationOnOutlined';
5import Rating from '@material-ui/lab/Rating';
6
7import useStyles from './styles';
8
9const Map = () => {
10    const classes = useStyles();
11    const isMoblie = useMediaQuery('(min-width:600px)');
12
13    const coordinates = { lat : null, lng : null };
14
15    return(
16        <div className={ classes.mapContainer } >
17            <GoogleMapReact
18                bootstrapURLKeys={{ key : 'xxxxxxxxxxxxxxxxxxxxxxxxxxx' }}
19                defaultCenter={coordinates}
20                center={coordinates}
21                defualtZoom={14}
22                margin={ [ 50, 50, 50, 50 ] }
23                options={''}
24                onChange={''}
25                onChildClick={''}
26            >
27            </GoogleMapReact>
28            
29        </div>
30    );
31}
32
33export default Map;

試したこと

const coordinates = { lat : 0, lng : 0 }; の値を、NULLとか、Floatなどを素数（{ lat: -25.344, lng: 131.031 };）に変更してみました。　

補足情報（FW/ツールのバージョンなど）

"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@react-google-maps/api": "^2.2.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"google-map-react": "^2.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"