I am trying to fetch and display data from OpenWeather api but on first run the currentWeather object will be empty then on reload the data is fetched. Here is the code

import { Box, CssBaseline } from "@mui/material";
import { useEffect, useState } from "react";
import CardList from "./components/CardList";
import axios from 'axios'


function App() {
  const [currentWeather, setCurrentWeather] = useState({})

  useEffect(() => {
    const getCurrentWeather = (city) => {
      axios.get(`https://api.openweathermap.org/data/2.5/weather? q=${city}&appid=${API_KEY}&units=metric`)
      .then(res =>
        setCurrentWeather(res.data)
        )
      .catch(err =>
        console.log(err)
        )
      .finally(() => {
        console.log(currentWeather)
       }
       )
    }
    getCurrentWeather('Bulawayo')
}, [])



return (
  <Box sx={{
    p: 4,
    backgroundColor: "#f3f6fa",
  }}>
    <CssBaseline />
    <CardList currentWeather={currentWeather} />
  </Box>
);
}

export default App;

any help would be appreciated thank u