React Native flatlist linked to new pages

Question

I have created a carousel using flatlist. I have created multiples pages and I would like to link each item to one of those pages I have created. It is giving me a error saying: cannot read properly 'navigate' of undefined

export const sliderData = [
    {
        id: 1,
        title: 'Freestyle',
        subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
        image: require('../../assets/images/Freestyle.jpg'),
        navigateTo:"FreestyleWorkoutsScreen",
    
    },
    {
        id: 2,
        title: 'Butterfly',
        subtitle: 'Lorem ipsum dolor sit amet',
        image: require('../../assets/images/male-swimmer-swimming-butterfly-stroke.jpg'),
        navigateTo:"SCREEN_NAME"  
    
    },
    {   
        id: 3,
        title: 'Backstroke',
        subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
        image: require('../../assets/images/male-swimmer-swimming-pool.jpg'),
        navigateTo:"SCREEN_NAME" 
    
    },
    ];

const FreestyleCarousel =({ list, navigation}) => {
    return (
        <FlatList
        data={list}
        horizontal
        snapToInterval={CARD_WIDTH_SPACING}
        decelerationRate="fast"
        showsHorizontalScrollIndicator={false}
        keyExtractor={i => i.id}
        renderItem={({item, index}) => {
          return (
            <TouchableOpacity onPress={()=> navigation.navigate(item.navigateTo)}
            style={{
              marginLeft: spacing.l,
              marginRight: index === list.length - 1 ? spacing.l : 0,
            }}>
            <View style={[styles.card, shadow.dark]}>
              <View style={styles.imageBox}>
                <Image source={item.image} style={styles.image} />
              </View>
              <View style={styles.titleBox}>
                <Text style={styles.title}>{item.title}</Text>
              </View>
            </View>
          </TouchableOpacity>
        );
      }}
    />
  );
};

How can I fix the error and link my items

Answer 1

if you want to use navigation props, FreestyleCarousel must be decrale as Screen component and put inside NavigationContainer