Estoy tratando de obtener y mostrar datos de OpenWeather api, pero en la primera ejecución, el objeto currentWeather estará vacío y luego, al volver a cargar, se recuperarán los datos. Aquí está el código

 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;

cualquier ayuda sería apreciada gracias