I am currently in learning the basics of ReactJs. I am trying to pass a nested object to the "weatherValues". After doing that in the fetchData function, it doesn't work and returns the original "null" value without passing the nested object from the fetch to the setState. Please help.

  function App() {
  const [dLocation, setDLocation] = useState('London');
  const [defaultLocation, setDefault] = useState(true);
  const [weatherValues, setWeatherValues] = **useState(null)**;

    const **fetchData** = () => {
    fetch(`${api.API_URL}?key=${api.API_KEY}&q=${dLocation}&days=${api.API_DAY_DATA}`)
    .then(response => response.json())
    .then(data => {
      **setWeatherValues(data)**
      //setWeatherValues({...weatherValues, ...data})
      //weatherArray = {...weatherArray, ...data};
      console.log(weatherValues)
      console.log(data)
    }
    );
    
}
 useEffect(() => {
        if(defaultLocation === true){
           **fetchData();**
           //console.log('Yes')
          // setWeatherValues(weatherArray)
           //console.log(weatherValues)
        }
        setDefault(false);
  })
  return (

   )
}

export default App;