Как отправить полученный ответ API другому компоненту?

Я использую Weatherbit API для создания веб-APP. Я использую ответ API в файле App.js, затем сохраняю его в состояние, а затем передаю это состояние другому компоненту. Но этот компонент получает начальное значение (пустой объект) этого состояния, а не ответ API. ПОСМОТРИТЕ код ниже.

function App() {

  const [details, setDetails] = useState({ "value": "First" })
  const [url, setUrl] = useState("")

  const fetchWeather = async () => {
    const { data } = await Axios.get(`https://api.weatherbit.io/v2.0/current?city=Modasa&key=24d74085081e4ec7b4971bec0a1f2ef3`)

    // const details = data.data[0]
    console.info(data)
    setDetails(data)
  }

  useEffect(() => {
    fetchWeather()
  }, [])

  return (
    <div className = "App">
      <SectionOne data = {details} />
    </div>
  );

}

export default App;

** И второй компонент, где я получаю начальное значение (пустой объект)**

const SectionOne = ({ data }) => {

  return (
    <div>

      <div className = "sectionOne">
        <span className = "region">{`${data.data[0].city_name}`}</span>
        <span className = "country">{data.data[0].country_code}</span>
      </div>

      <div className = "sectionTwo">
        <span className = "icon"><img source = {data.data[0].weather?.icon} /></span>
        <span className = "temp">{data.data[0].temp}</span>
        <span className = "unit">°C</span>
        <span className = "feels">Feels Like {data.data[0].app_temp} °C | {data.data[0].weather?.description}</span>
      </div>

      <div className = "sectionThree">
        <div><span>Wind</span>{data.data[0].wind_spd} KM</div>
        <div><span>Wind Dir.</span>{data.data[0].wind_cdir}</div>
        <div><span>Humidity</span>{data.data[0].current?.humidity} %</div>
        <div><span>Pressure</span>{data.data[0].pres} MB</div>
        <div><span>UV Index</span>{data.data[0].uv}</div>
        <div><span>Visibility</span>{data.data[0].vis} KM</div>
      </div>

    </div>
  )
}

export default SectionOne