Error: Couldn't find a navigation object. Is your component inside NavigationContainer? (how to use useNavigation inside Navigation container)

I am writing a react-native MERN chat app and I am adding a profile page so the user can edit or add his data.the I want to access this page by a button and using useNavigation but I got the error ehich I mentioned in the title NOTE: the button is inside the Navigation Container My Code:

import React from 'react';
import storage from './storage';
import { useNavigation } from '@react-navigation/native'
import { NavigationContainer, Screen } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { LogBox, ActivityIndicator, Button, TouchableOpacity, View } from 'react-native';
import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
import Icon from 'react-native-vector-icons/Entypo';
import ProfileScreen from './Profile.Screen';
//rest of the imports...

export default function App() {
  const [savedData, setSavedData] = React.useState(null)
  const [fetching, setFetching] = React.useState(false)
  const [receiver, setReceiver] = React.useState(null)
  const [visible, setVisible] = React.useState(false);

  const navigation = useNavigation();

  //rest of the code...

  return (
    <ThemeProvider>
      <NavigationContainer>
        <Stack.Navigator>
          {isSignedIn && <>
            <Stack.Screen name="Home" component={ChatList} initialParams={params} options={() =>    ({
              title: "myApp", headerRight:
                () => (
                  <View style=>
                    <Menu
                      visible={visible}
                      anchor={
                        <Icon
                          name="dots-three-vertical"
                          size={20}
                          color="black"
                          onPress={() => setVisible(true)}
                        />
                      }
                      onRequestClose={() => setVisible(false)}
                    >
                      <MenuItem onPress={navigation.navigate('Profile')}>My Profile</MenuItem> {/* this is the line*/}
                      <MenuItem onPress={changeTheme}>Change Theme</MenuItem>
                      <MenuItem onPress={() => handleLogout(user)}>Log Out</MenuItem>
                    </Menu>
                  </View>
                )
            })} />
            <Stack.Screen name="Chat" component={Chat} initialParams={params} options={() => ({ title: receiver })} />
            <Stack.Screen name="Users" component={UsersScreen} initialParams={params} />
            <Stack.Screen name="Profile" component={ProfileScreen} initialParams={params} options= />
          </>}

          {!isSignedIn && <>
            <Stack.Screen name="SignIn" component={SignInScreen} initialParams= options={() => ({ title: "myApp" })} />
            <Stack.Screen name="ForgotPassword" component={ForgetPassword} />
          </>}


        </Stack.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  )

}

I tried removing the quotations (I saw it as a solution in some place)(Instead of navigation.navigate('Profile') I used navigation.navigate(Profile) and I tried to remove the onPress function and still got the error based on const navigation = useNavigation() and I tried importing useNavigation beside NavigationContainer but nothing worked

I know this would've worked if there is no menu how can I do this with the menu (NOTE: I know that it should've been wrapped by navigationContainer but I don't know how)