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

Question

前提

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

実現したいこと

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

• ▲▲機能を動作するようにする

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

google_map_markers.js:260 Uncaught TypeError: Cannot read properties of undefined (reading 'latLng')

該当のソースコード

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 makeStyles from './styles';

const Maps = () => {
    const classes = makeStyles();
    const isMobile = useMediaQuery('(min-width:600px)');

    const coordinates = { lat: 0, lng: 0 };

    return (
        <div className={classes.mapContainer}>
            <GoogleMapReact>
                bootstrapURLKeys={{ key: 'xxxxxxxxxxx' }}
                defaultCenter={coordinates}
                center={coordinates}
                defaultZoom={14}
                margin={[50,50,50,50]}
                options={''}
                onChange={''}
                onChildClick={''}


            </GoogleMapReact>

        </div>
    );
}

export default Maps;

試したこと

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

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

      "dependencies": {
        "@material-ui/core": "^4.12.4",
        "@material-ui/icons": "^4.11.3",
        "@material-ui/lab": "^4.0.0-alpha.61",
        "@react-google-maps/api": "^2.17.1",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "axios": "^1.2.3",
        "google-map-react": "^2.2.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      }

Answer 1

            <GoogleMapReact>
                bootstrapURLKeys={{ key: 'xxxxxxxxxxx' }}
                defaultCenter={coordinates}
                center={coordinates}
                defaultZoom={14}
                margin={[50,50,50,50]}
                options={''}
                onChange={''}
                onChildClick={''}
            </GoogleMapReact>

と記載されていますが、

            <GoogleMapReact
                bootstrapURLKeys={{ key: 'xxxxxxxxxxx' }}
                defaultCenter={coordinates}
                center={coordinates}
                defaultZoom={14}
                margin={[50,50,50,50]}
                options={''}
                onChange={''}
                onChildClick={''}
            />
や、
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'xxxxxxxxxxx' }}
                defaultCenter={coordinates}
                center={coordinates}
                defaultZoom={14}
                margin={[50,50,50,50]}
                options={''}
                onChange={''}
                onChildClick={''}
            >

            </GoogleMapReact>

の記載ミスではないですか？