react google maps get map center

1import React, { useState } from 'react';
2import { GoogleMap, LoadScript } from '@react-google-maps/api';
3import mapStyle from './mapStyle';
4const mapContainerStyle = {
5  height: "300px",
6  width: "100%"
7};
8const FormMap = () => {
9  const [mapRef, setMapRef] = useState(null);
10  const [center, setCenter] = useState({ lat: 48.1467112, lng: 17.1385319 });
11  const [clickedLatLng, setClickedLatLng] = useState(null);
12  return (
13    <>
14      <LoadScript
15        id="form-map"
16        googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}
17        version="weekly"
18      >
19        <GoogleMap
20          id="form-map"
21          // Store a reference to the google map instance in state
22          onLoad={map => setMapRef(map)}
23          onClick={e => setClickedLatLng(e.latLng.toJSON())}
24          zoom={14}
25          center={center}
26          onCenterChanged={() => setCenter(mapRef.getCenter().toJSON())}
27          mapContainerStyle={mapContainerStyle}
28          clickableIcons
29          options={{
30            disableDefaultUI: true,
31            styles: mapStyle,
32          }}
33        >
34        </GoogleMap>
35      </LoadScript>
36      {/* Our center position always in state */}
37      <h3>
38        Center {center.lat}, {center.lng}
39      </h3>
40      {/* Position of the user's map click */}
41      {clickedLatLng && (
42        <h3>
43          You clicked: {clickedLatLng.lat}, {clickedLatLng.lng}
44        </h3>
45      )}
46    </>
47  )
48}
49export default FormMap;