Array of objects do not render using setState and map

I am using typescript in a react-native project, and would like to render an array of objects that come from a query using AWS-Amplify, using the map function.I use setState (here setTracks) to declare my state.While it logs well in the console, the map function does not render anything.

Here is the code:

 import {useEffect, useState} from 'react'; import {   ScrollView,   SafeAreaView,   StyleSheet,   Image,   TouchableWithoutFeedback,   ImageBackground,   Dimensions } from "react-native"; import EditScreenInfo from '../components/EditScreenInfo'; import { Text, View } from '../components/Themed'; import Amplify from 'aws-amplify' import config from './aws-exports' Amplify.configure(config) import { API, graphqlOperation } from 'aws-amplify' import { listTracks } from '../src/graphql/queries' export default function TabTwoScreen() {   const [tracks, setTracks] = useState<Array>([])   //const [tracks, setTracks] = useState([])   useEffect(() => {     fetchTracks()}, [])   async function fetchTracks() {     try {       const trackData = await API.graphql(graphqlOperation(listTracks))       console.log('trackData:', trackData.data.listTracks.items)       setTracks([trackData])       console.log('trackdata is: ', tracks)     } catch (err) {       console.log('error fetching tracks...', err)     }   };     return (<SafeAreaView style={styles.container}>         {           tracks.map((track, index) => (<View key={index} style={styles.item}><Text style={styles.name}>{track.song}</Text><Text style={styles.description}>{track.artist}</Text><Text style={styles.city}>{track.songUrl}</Text></View>           ))         }</SafeAreaView>     )   }```