Estoy desarrollando una aplicación nativa de reacción usando Flatlist.i después de haber pasado por muchos tutoriales. No estoy exactamente seguro de cuál es el problema, necesito un nuevo par de ojos. Este es mi código,

Estoy tratando de mostrar datos en una lista plana animada. no he podido recuperar los datos. Usé el gancho de reacción y lo puse en una matriz, ¿qué estoy haciendo exactamente mal aquí? es el

 useEffect(() => { firebase.firestore() .collection('Courses') .doc('CourseID') .get() .then((snapshot) => { let myData = []; snapshot.forEach((doc) => { const data = doc.data() myData.push({ id: doc.id, name: data.CourseName, number: data.price,img: data.courseImage, pres: data.CourseTime }); }); setToken(myData) }).catch((error) => { console.log("Error getting document:", error); }) }, []); const TCard = ({name,number,pres,img,index}) => { const inputRange = [ (index - 1) * cardWidth, index * cardWidth, (index + 1) * cardWidth, ]; const opacity = scrollX.interpolate({ inputRange, outputRange: [0.7, 0, 0.7], }); const scale = scrollX.interpolate({ inputRange, outputRange: [0.8, 1, 0.8], }); return ( <Animated.FlatList onMomentumScrollEnd={(e) => { setActiveCardIndex( Math.round(e.nativeEvent.contentOffset.x / cardWidth), ); }} onScroll={Animated.event( [{nativeEvent: {contentOffset: {x: scrollX}}}], {useNativeDriver: true}, )} horizontal data={token} contentContainerStyle={{ paddingVertical: 30, paddingLeft: 20, paddingRight: cardWidth / 2 - 40, }} showsHorizontalScrollIndicator={false} renderItem={({item, index}) => <TCard name={item.CourseName} pres={item.price} img={item.img} index={index} />} snapToInterval={cardWidth} />)```