I am new to react native and react navigation and I get this error.

Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

I don't understand my because I am just using the same code which already worked, but now it's not working.

I am trying to make a back arrow that send you back to the MachineList screen.

//doesn't work

const AddMachineDetails = ({route}, props) => {



...



<TouchableOpacity onPress={() => props.navigation.navigate("MachinesList")}>

        <BackArrow />

 </TouchableOpacity>

So when I press my backarrow it send me this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Here is my Navigation file:

import MachinesList from '../components/MachinesList'

import AddMachineDetails from '../components/AddMachineDetails';



...



function MachineListStackScreen() {

    return(

        <Stack.Navigator screenOptions={{headerShown: false}}>

            <Stack.Screen name='MachinesList' component={MachinesList}/>

            <Stack.Screen name='AddMachineDetails' component={AddMachineDetails}/>

        </Stack.Navigator>

    )

}



...

I think the problem is somewhere in this code, but if not, I'll show you more of my code

Here is an example where my navigation.navigate work perfectly:

//no specific imports  (but works)



const MachinesList = (props) => {



...





<TouchableOpacity style={styles.machineBox} onPress={() => props.navigation.navigate('AddMachineDetails', {item})}>