im developing a react native application using Flatlist.i having been through a lot tutorials. i'm not exactly sure what is the problem, i need a fresh pair of eyes. This is my code,

i am trying to display data in an animate flatlist. i have not been able to retrieve the data. i used the react hook and put it into an array, what exactly am i doing wrong here. is the

 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}
          />)```