List Item Data is populated but the data does not display on flat list - react-native

Question

In this FlatList, the list items Display but they are blank.
I have set break points and the data is there, but it only displays blank list items.
I think the issue may arise when I am setting the array empty, then it does not re-render properly when the fetch is complete.
Crypto Component
import {StyleSheet, FlatList} from 'react-native';
import {getCrypto} from '../api_service/crypto';
import CryptoItem from '../data/cryptoItem';
export default class CryptoMarket extends Component {
constructor(props) {
super(props);
this.state = {cryptos: [], refreshing: true};
this.fetchCrypto = this.fetchCrypto.bind(this);
}
componentDidMount() {
this.fetchCrypto();
}
fetchCrypto() {
getCrypto()
.then(cryptos => this.setState({cryptos, refreshing: false}))
.catch(() => this.setState({refreshing: false}));
}
handleRefresh() {
this.setState(
{
refreshing: true,
},
() => this.fetchCrypto(),
);
}
render() {
return (
<FlatList
data={this.state.cryptos}
renderItem={({item}) => <CryptoItem crypto={{item}} />}
keyExtractor={item => item.name}
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh.bind(this)}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#0f0f0f',
},
contentContainer: {
marginTop: 50,
alignItems: 'center',
paddingHorizontal: 20,
},
title: {
fontSize: 20,
color: '#fff',
},
});
Fetch API
export async function getCrypto() {
try {
const fetchCrypto = await fetch(
'https://api.nomics.com/v1/currencies/ticker?key=***&ids=BTC,ETH,XRP',
);
const displayCrypto = await fetchCrypto.json();
console.log(displayCrypto);
return displayCrypto;
} catch (error) {
throw error;
}
}
List Item
import React, {Component} from 'react';
import {ListItem} from 'react-native-elements';
export default class CryptoItem extends Component {
render() {
const {name, logo_url, price} = this.props.crypto;
return (
<ListItem
title={name}
text={'Price : ' + price}
leftAvatar={{source: {uri: logo_url}}}
bottomDivider={true}
/>
);
}
}