unable to use useNavigation for one screen

Previously, I was using navigation with toggles and modals. However, now I am switching to navigation with the hook.

I have an AddFriendPage that looks like:

export const AddFriendPage: React.FunctionComponent = () => {  //const [showAddFriendEmailPage, setShowAddFriendEmailPage] = useState(false);  const navigation = useNavigation();  // const toggleAddFriendEmailPage = () => {  //   setShowAddFriendEmailPage(showAddFriendEmailPage ? false : true);  // };  return (<Modal     //visible={showAddFriendPage}     //animationType="slide"    transparent={true}><SafeAreaView ><View style={styles.container}><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text                style={styles.searchCancelDoneText}                //onPress={toggleShowPage}>                onPress={() => navigation.goBack()}>                Cancel</Text><Text style={styles.searchTopMiddleText}>Add Friend</Text><Text style={styles.searchCancelDoneText}>Done</Text></View><View style={styles.searchFieldContainer}><View style={styles.buttonContainer}><Button                  rounded                  style={styles.button}                  //onPress={() => setShowAddFriendEmailPage(true)}>                  onPress={() => navigation.navigate('AddFriendEmail')}><Text style={styles.text}>Add by Email</Text></Button></View></View></View>          {/* <AddFriendEmailPage            showAddFriendEmailPage={showAddFriendEmailPage}            toggleShowPage={toggleAddFriendEmailPage}          /> */}</View></SafeAreaView></Modal>  );};

I'm trying to navigate to another page but it doesn't work:

onPress={() => navigation.navigate('AddFriendEmail')}

However, if I write some other screen's name, eg ('Home'), the navigation works fine. Similarly, if I go to another screen and try to navigate to the AddFriendEmail screen, it works fine. But it's not working from this particular page AddFriend. How can I fix this?

I added a console.log to my AddFriendEmail component. When I click on the button from AddFriend page, I don't see any console log. However, when I change the log text in the IDE, I automatically start seeing it in the log. But the screen is still not navigated to AddFriendEmail. What could I be doing wrong?

AddFriendEmail:

 export const AddFriendEmailPage: React.FunctionComponent = (  ) => {    console.log('I am working');  return (<Modal      // visible={showAddFriendEmailPage}      // animationType="slide"      transparent={true}><SafeAreaView>        ....</SafeAreaView></Modal>  );};