Why can I not navigate to another page from FlatList component in react native?

I’m not sure what’s wrong here, as far as I can tell I am doing this correctly as it has worked everywhere else in my app. The only difference is that I’m trying to do this from a FlatList component. What is wrong with this? I’ve also tried putting {navigation} in renderMyItem instead of FLToyCard brackets, didn’t work either. Error I’m getting is:
TypeError: undefined is not an object (evaluating 'navigation.navigate').

import { StyleSheet, Text, View, FlatList } from 'react-native'
import React from 'react'

import Toy from './Database'
import ToyCard from './ToyCard'

const FLToyCard = ({navigation}) => {
    
    const headerComp = () => {
        return(
            <View style={{alignSelf: 'center'}}>
                <Text style={{fontSize: 25, padding: 10}}>All Toys For Sale</Text>
            </View>
        )
    }
    
    const renderMyItem = ({item}) => {
        return(
            <View style={{flex: 1}}>
                <ToyCard 
                name={item.name}
                image={item.image}
                price={item.price}
                desc={item.desc}
                seller={item.seller}
                onPress={()=>navigation.navigate('SlugProduct')}
                />
            </View>
        )
    }
    
    return(
        <View>
            <FlatList 
                data={Toy}
                renderItem={renderMyItem}
                keyExtractor={(item)=>item.id}
                numColumns={2}
                ListHeaderComponent={headerComp}
            />
        </View>
    )
}

export default FLToyCard

This is my App.js:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';


import SlugProduct from './Screens/SlugProduct';

export default function App() {
  const Stack = createNativeStackNavigator()
  return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName='Login' >
             // list of other pages
             <Stack.Screen name="SlugProduct" component={SlugProduct} />
             <Stack.Screen name='ViewToys' component={ViewToys}
        </Stack.Navigator>
    </NavigationContainer>
  );
}

EDIT: heres the ViewToys page that FLToyCard is being input into. I’ve tried adding the onPress into both Views and FLToyCard but got the same error each time.

import { StyleSheet, Text, View, ScrollView} from 'react-native'
import React from 'react'

import FLToyCard from '../Components/FlatListCards'

const ViewToys = ({navigation}) => {
  return (
    <View style={{backgroundColor: '#ffce20', height: '100%'}}>
      <View>
        <FLToyCard />
      </View>
    </View>
  )
}

export default ViewToys