import { CssBaseline, Grid } from '@material-ui/core';
import React, { useEffect, useState } from 'react'

import Header from './components/Header/Header';
import List from './components/List/List';
import Map from './components/Map/Map';
import { getPlaceData } from './api/index'


function App() {
  const [coordinates, setCoordinates] = useState({lat: 0, lng: 0})
  const [bounds, setBounds] = useState(null)

  

  useEffect(() => {

    // console.log(bounds);

    getPlaceData(bounds.sw, bounds.ne)
      .then((data)=>{
        console.log(data)
        setPlaces(data)
    })
  }, [coordinates, bounds])
  

  return (
    <>
      <CssBaseline />
      <Header />
     
        <Grid item xs={12} md={8}>
          <Map 
            setCoordinates={setCoordinates}
            setBounds = {setBounds}
            coordinates = {coordinates}
          />
        </Grid>

      </Grid>

    </>
  );
}

export default App;

After removing elements in the getPlaceData function works well, but it is showing blank when passing those. How can I remove this error I am trying to use google-map API Can anyone help me in solving this issue??