React - Displaying Data from API - reactjs

Question

I am trying to consume an API and display it on my app. It is currently pulling in the data in the console log but I can't seem to access it to display it on my app as it is just stuck on loading... I want to show the data with the number of confirmed cases on the h5 variant of the first card {confirmed.value} But not to sure why it is not showing.
Cards
import React from 'react'
import {Card, CardContent, Typography, Grid} from '#material-ui/core'
import styles from './Cards.module.css'
export default function Cards({data: {confirmed, recovered, deaths}}){
if(!confirmed){
return`Loading...`
}
return (
<div className={styles.container}>
<Grid container spacing={3} justify="center">
<Grid item component={Card}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Infected</Typography>
<Typography variant="h5">{confirmed.value}</Typography>
<Typography color="textSecondary">REAL DATE</Typography>
<Typography variant="body2">Number of active cases of COVID-19</Typography>
</CardContent>
</Grid>
</Grid>
<Grid container spacing={3} justify="center">
<Grid item component={Card}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Recovered</Typography>
<Typography variant="h5">REAL DATA</Typography>
<Typography color="textSecondary">REAL DATE</Typography>
<Typography variant="body2">Number of Recovered cases of COVID-19</Typography>
</CardContent>
</Grid>
</Grid>
<Grid container spacing={3} justify="center">
<Grid item component={Card}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Deaths</Typography>
<Typography variant="h5">REAL DATA</Typography>
<Typography color="textSecondary">REAL DATE</Typography>
<Typography variant="body2">Number of Death cases of COVID-19</Typography>
</CardContent>
</Grid>
</Grid>
</div>
)
}
App JS
import React, { Component } from 'react'
import {Cards, Chart, CountryPicker} from './components'
import styles from './App.module.css'
import {fetchData} from './api'
export default class App extends Component {
state = {
data: {},
}
async componentDidMount(){
const fetchedData = await fetchData()
console.log(fetchedData);
this.setState({data: fetchedData})
}
render() {
const {data} = this.state;
return (
<div className={styles.container}>
<Cards data={data} />
<CountryPicker/>
<Chart/>
</div>
)
}
}

Answer 1

Try to change the component header to:
export default function Cards({confirmed, recovered, deaths})