невозможно использовать useNavigation для одного экрана

Question

Раньше я использовал навигацию с переключателями и модальными окнами. Однако сейчас я перехожу на навигацию с помощью крючка.

У меня есть страница AddFriendPage, которая выглядит так:

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>
  );
};

Я пытаюсь перейти на другую страницу, но это не работает:

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

Однако если я напишу другое имя экрана, например ('Home'), навигация будет работать нормально. Точно так же, если я go перехожу на другой экран и пытаюсь перейти к экрану AddFriendEmail, он работает нормально. Но это не работает с этой конкретной страницы AddFriend. Как я могу это исправить?

Я добавил console.log в свой компонент AddFriendEmail. Когда я нажимаю кнопку со страницы AddFriend, я не вижу журнала консоли. Однако, когда я меняю текст журнала в среде IDE, я автоматически начинаю видеть его в журнале. Но экран по-прежнему не переходит к AddFriendEmail. Что я делаю не так?

AddFriendEmail:

 export const AddFriendEmailPage: React.FunctionComponent = (
  ) => {
    console.log('I am working');

  return (
    <Modal
      // visible={showAddFriendEmailPage}
      // animationType="slide"
      transparent={true}
      >
      <SafeAreaView>
        ....
      </SafeAreaView>
    </Modal>
  );
};