fetched data is not displayed in React - reactjs

Question

Iam trying to fetch the data from this API
https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/total
the data is successfully displayed in the console
but it is not displayed in the browser
const [selectedCountry, setSelectedCountry] = useState('USA');
const [stats, setStats] = useState({});
useEffect(() => {
const fetchData = async () => {
const result = await axios.get(API_URL, {
headers: {
'x-rapidapi-host': 'covid-19-coronavirus-statistics.p.rapidapi.com',
'x-rapidapi-key': 'YOUR_API_KEY',
},
params: {
country: selectedCountry
}
});
setStats(result.data.data);
};
fetchData();
}, [selectedCountry]);
return (
<div className="flex flex-col items-center justify-center p-4">
<div className="select w-full md:w-1/2">
<h2 className="text-xl text-red-600 font-medium mb-3">Select a Country:</h2>
<select value={selectedCountry} onChange={e => setSelectedCountry(e.target.value)} className="block appearance-none w-full bg-white text-blue-500 border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
{countries.map(country => (
<option key={country} value={country}>{country}</option>
))}
</select>
</div>
<div className="stats w-full text-blue-600 md:w-1/2 mt-4">
<h2 className="text-xl text-red-600 font-medium mb-3">Selected Country:</h2>
<h2 className='text-yellow-600 mb-4 bg-gray-200'>{selectedCountry}</h2>
<p className="stat">Confirmed Cases: {stats.confirmed}</p>
<p className="stat">Deaths: {stats.deaths}</p>
<p className="stat">Recoveries: {stats.recovered}</p>
</div>
</div>
the result in the console is:
data : confirmed : 4563190 deaths : 50541 lastChecked : "2023-01-31T18:11:16+00:00" lastReported : "2023-01-31T04:20:32+00:00" location : "US" recovered : null
also i picture
Note that ive already used my own API key