Why is my useState returning a null value

Question

I am in the middle of a tutorial project of building somewhat a tourist guide. I am to use a travel advisor API to get data on all restaurants, hotels and attractions from anywhere we go to on our map. in relation, i am also using Google Maps API to render out a map and change the longitude and latitude and get different restaurants and hotels as the user keeps moving around the map. the problem is that I need to specify the bounds of the map, which is what is used to dynamically get the longitude and latitude from the map. I create a state for the bounds, initialize it to null, pass it down as props to get the longitude and latitude from the user's map, and then send them back as parameters to the function communicating with the API, so that the API can get the specific restaurants, hotels and attractions based off those longitude and latitude parameters, the problem is that the bounds keep coming back as null. I've looked for hours and I can't find a single error. How do I fix it?

This is my code:

Index.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-Key': 'a-string-of-random-numbers',
                     'X-RapidAPI-Host': 'travel-advisor.p.rapidapi.com'
                 }}
             )
         return data
     }catch(error){
         console.log(error)
     }
 }

App.js:

 import {React, useState, useEffect} from 'react'

 import {CssBaseline, Grid} from '@material-ui/core'

 import Header from './components/Header/Header'
 import List from './components/List/List'
 import Map from './components/Map/Map'
 import { getPlacesData } from './api'

 function App(){ 
     const [places, setPlaces] =  useState([])
     const [coordinates, setCoordinates] = useState({})
     const [bounds, setBounds] = useState(null)

     useEffect(()=>{
         navigator.geolocation.getCurrentPosition(({coords: {latitude, longitude}})=>{
             setCoordinates({lat: latitude, lng: longitude})
         })
     },[])

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

     return(
         <>
             <CssBaseline/>
             <Header/>
             <Grid container spacing = {3} style ={{ width: '100%'}}>
                 <Grid item xs ={12} md={4}>
                     <List/>
                 </Grid>
                 <Grid item xs ={12} md={8}>
                     <Map 
                         coordinates={coordinates}
                         setCoordinates={setCoordinates}
                         setBounds={setBounds}
                     />
                 </Grid>
             </Grid>
         </>
     )
 }
 export default App

Map.js:

 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/Rating';

 import useStyles from './style'

 const Map = ({coordinates, setCoordinates, setBounds}) =>{
     const classes = useStyles()
     const isMobile = useMediaQuery('(min-width: 600pxx)')

     return(
         <div className = {classes.mapContainer}>
             <GoogleMapReact
                 bootstrapURLKeys={{key: 'string-of-some-random-letters'}}
                 defaultCenter = {coordinates}
                 center={coordinates}
                 defaultZoom={14}
                 margin={[50, 50, 50, 50]}
                 options={''}
                 onChange={(e) => {
                     setCoordinates({lat: e.center.lat, lng: e.center.lng})
                     setBounds({ne: e.marginBounds.ne, sw: e.marginBounds.sw})
                 }}
                 onChildClick={''}
             >

             </GoogleMapReact>
         </div>
     )
 }
 export default Map

This is the exact error it keeps bringing out:

Uncaught TypeError: Cannot read properties of null (reading 'sw')

PS. I know my explanation might seem confusing to anyone that hasn't worked with a maps API but I would really appreciate it if I get a response.