Not able to use useState in the default app function

I am very new to React and I was trying to use the useState hook to store a request that returns json data in the form :

[{"_id":"622fff9046722bfbaace77d1","Country":"United States","CoronavirusCases":81216268,"Deaths":991038,"Recovered":56282006},{"_id":"622fff9846722bfbaace789f","Country":"United Kingdom","CoronavirusCases":19700952,"Deaths":162873,"Recovered":18378375},{"_id":"622fff9846722bfbaace78a0","Country":"Brazil","CoronavirusCases":29382196,"Deaths":655326,"Recovered":27838793},{"_id":"622fff9846722bfbaace78a4","Country":"France","CoronavirusCases":23532997,"Deaths":140294,"Recovered":15867601},{"_id":"622fff9846722bfbaace78a5","Country":"India","CoronavirusCases":42995560,"Deaths":516005,"Recovered":42441449}]

I’m using this functional component to return the data:

export const FetchCovidData = () => {

  return axios.get('http://localhost:5000/country-ex')
  .then(function (response) {
    return response.data;
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
}

This is my App function which should be trying to store the returned JSON into the array CovidData so that I can use it as the dataset for the graphs made using chartJS (which seem to be working fine with sample data I made up in the same format as the returned JSON data) :

export default function App() {
  const [CovidData, setCovidData] = useState([]);

  setCovidData(FetchCovidData());
  console.log(CovidData);
  return (

    <div className="App">
    
    <div className='block1'>
      <h1 className='head'>Covid-19</h1>  
      <br></br>
      <br></br>
      <br></br>
      <br></br>
      <br></br>
    </div>  

    <div className='block2'>
      <div className="bar" style={{width:500}}>
        <BarChart ChartData={ CovidData }/>
      </div>
      <br></br>
      <br></br>
      <br></br>
      <div className="pie" style={{width:500}}>
        <PieChart ChartData={ CovidData }/>
      </div>
      <br></br>
      <br></br>
      <br></br>
      <div className="doughnut" style={{width:500}}>
        <DoughnutChart ChartData={ CovidData }/>
      </div>
      <br></br>
      <br></br>
      <br></br>
      <div className="combined" style={{width:500}}>
        <CombinedChart ChartData={ CovidData }/>
      </div>
    </div>

    </div>
  );
}

When I look at the console on the website it tells shows me the link to a react error page titled “Invalid Hook Call Warning” pointing to the line where I’m defining the useState for CovidData. I checked that my react and react-dom were the same version. It also seems that using my hook at the top of the function which should be the right way of doing it. I have looked at other posts addressing the same error as me but I found them very difficult to understand and a lot more complicated compared to my situation. I would appreciate any help on this.