Google Maps Javascript Api cant take coordinates from useState-CodePudding

I am trying to render google maps using javascipt api. It gets correctly rendered when it is statically typed like

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

but when i use usestates to set coordinates , it shows an warning message that GoogleMap: center or defaultcenter property must be defined.

<GoogleMapReact
        
        bootstrapURLKeys={{ key: 'xxx' }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={''}
        onChange={(e)=>{
          console.log(e);
          setCoordinates({lat:e.center.lat,lng:e.center.lng});
        }}
        onChildClick={''}
        
      >

Here is the useStates function

const [coordinates, setCoordinates] = useState({});

Here is my Map function

<Map 
     setCoordinates={setCoordinates}
                
     setBounds={setBounds}
     coordinates={coordinates}
            
            />

CodePudding user response：

You have to define the values

const [coordinates, setCoordinates] = useState({lat: 0, lng: 0 });