My issue: My state sometimes displays, if I refresh the browser, update code I get the following error `TypeError: Cannot read properties of undefined (reading 'country')` I am not sure why this behaviour occurs. In one instance it displays and another time it doesn't. Any explanation and solution would be appreciated.

My response returns a 200 status code and all the appropriate data that I console.log is legit so I am confused why this issue occurs.

---

App.js

```
import api from './api/fetchCovidData'
import { useState, useEffect } from 'react'

const  App = () => {
  const [covid, setCovidData] = useState({})

  useEffect(() => {
    const fetchCovidData = async () => {
      try{
        const response = await api.get('/cases?country=France');
        console.log(response.data)
        setCovidData(response.data);
      } catch (err) {
        if (err.response){
          // Not in the 200 response range
          console.log(err.response.data);
          console.log(err.response.status);
          console.log(err.response.headers);
        } else {
          console.log(`Error: ${err.message}`);
        }
      }
    }
    fetchCovidData();
  }, []);

  return (
    <div>
      <h1>{covid.All.country}</h1>
      <h1>{covid.All.population}</h1>
    </div>
  );
}

export default App;

```

---

fetchCovidData.js

```
import axios from "axios";

export default axios.create({
    baseURL: 'https://covid-api.mmediagroup.fr/v1'
});

```

---

Example Response

```
{
  "All": {
    "confirmed": 2604595,
    "recovered": 195365,
    "deaths": 62548,
    "country": "France",
    "population": 64979548,
    "sq_km_area": 551500,
    "life_expectancy": "78.8",
    "elevation_in_meters": 375,
    "continent": "Europe",
    "abbreviation": "FR",
    "location": "Western Europe",
    "iso": 250,
    "capital_city": "Paris",
    "lat": "46.2276",
    "long": "2.2137",
    "updated": "2020/12/26 12:21:56+00"
  }
}

```