How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+

Question

TL;DR

How to pass a fetched object from App.js to a child component asynchronously?

Do I have to wait for the whole data to be fetched and then return App.js? If so, How?

---

I'm trying to create a dashboard with react-chartjs-2 where it fetches data from the server as a whole object, however the chart loads before the fetching process, here's the code:

import './App.css';
import AvgVisitDuration from './component/AvgVisitDuration';
import Devices from './component/Devices';
import About from './component/About';

let stats;
let devices = [];

async function getStats() {
  const response = await fetch('http://192.168.1.4:8080/api');
  const data = response.json();
  stats = data;
  getDevices();
}

function getDevices() {
    // Set 'devices' as a new array based on 'stats'
}

function App() {
  getStats();
  return (
    <div className='container'>
      <About />
      <AvgVisitDuration />
      <Devices Data={devices} /> // This is the chart component
    </div>
  );
}

export default App;

here we have stats as the fetched object and extracted some of the information (like stats.isMobile) into a new array called devices. but the problem here is that when I pass the devices variable as props to <Devices /> component it only returns an empty array (the one which is first declared.)

I'll be grateful if you could tell me there is any other approach for this.