I am new to React Google Maps. I am using this library to create a map with several locations and trying fit the boundaries and center it. I am using it to locate restaurants, hotels and all on that particular location.

This is my code in which i am getting error as well as I am getting TypeError: Cannot read properties of undefined (reading 'lat') console.log(bounds.sw, bounds.ne) == undefined console.log(data) == undefined

App.js

function App(){
    const [places, setPlaces] = useState([]);
      const [coordinates, setCoordinates] = useState({});
      const [bounds, setBounds] = useState({});
    
      useEffect(() => {
        // this use effect for detecting current location
        navigator.geolocation.getCurrentPosition(({ coords:{latitude, longitude} }) => {
          setCoordinates({ lat: latitude, lng: longitude });
          // console.log(latitude,longitude)
        })
      },[]);
    
      useEffect(() => {
        getPlacesData(bounds.sw, bounds.ne)
          // console.log(bounds.sw, bounds.ne)
           .then((data)=>{
            //  console.log(data);
             setPlaces(data)
           })
      },[coordinates, bounds]);
     return(<>
            <Map 
                    setCoordinates={setCoordinates}
                    setBounds = {setBounds}
                    coordinates = {coordinates}
                  />
              <>
              )}

Api.js

import axios from 'axios';

const URL = 'https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary'


export const getPlacesData = async(sw, ne) =>{
    try {
        const {data:{data}} = await axios.get(URL, {
          params: {
            bl_latitude: sw.lat,
            tr_latitude: ne.lat,
            bl_longitude: sw.lng,
            tr_longitude: ne.lng,
          },
          headers: {
            'X-RapidAPI-Host': 'travel-advisor.p.rapidapi.com',
            'X-RapidAPI-Key': 'Key'
          }
        });
        return data;