React Native Navigation v5 нижняя навигация для перехода к новому стеку

Изучая React Native, я столкнулся с проблемой навигации при использовании createBottomTabNavigator. Мой экран отображается с двумя ссылками на нижней вкладке. Ссылка 1 - Романы, Ссылка 2 - Профиль. Когда я нажимаю ссылку 2, я хочу перейти на экран своего профиля (что он делает), но я хочу заменить нижнюю вкладку на новую (а это не так). Я пробовал использовать событие tabPress, и с помощью console.log я вижу, что он перехватывает событие, но когда я добавляю параметр навигации, он перестает работать.

вот соответствующий код:

const Stack = createStackNavigator();
const BottomTab = createBottomTabNavigator();
const headerTitle = "My Title";


function NovelsStack() {
    return (
        <Stack.Navigator screenOptions={{
            headerStyle: {
                backgroundColor: '#000',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 16,
            },
        }}>
            <Stack.Screen name="Home" component={HomeScreen} options={{ headerTitle: () => <HeaderTitle title={headerTitle} /> }} />
            <Stack.Screen name="Novels" component={TabNavigation} options={{ headerTitle: () => <HeaderTitle title={headerTitle} /> }}  />
            <Stack.Screen name="Novel" component={SelectedNovelNavigation} options={{ headerTitle: () => <HeaderTitle /> }} />
            <Stack.Screen name="Profile" component={ProfileNavigation} options={{ headerTitle: () => <HeaderTitle title={headerTitle} /> }} />
        </Stack.Navigator>
    );
}


function TabNavigation() {
    return (
        <BottomTab.Navigator
            tabBarOptions={{
                labelStyle: styles.mainTabBarLabels
            }}
        >
            <BottomTab.Screen name="Novels" options={{ title: "Novels" }} component={NovelsScreen} />
            {isAuthenticatedUser() ? (<BottomTab.Screen name="Profile" component={ProfileScreen} />)
                : (<BottomTab.Screen name="Login" component={LoginScreen} listeners={({ navigation, route }) => ({
                    tabPress: e => {
                      // Prevent default action                      
                      console.log(navigation)
                      e.preventDefault();
                
                    },
                  })}  />)
            }
        </BottomTab.Navigator>
    );
}


function ProfileNavigation() {
    return (
        <BottomTab.Navigator
            tabBarOptions={{
                labelStyle: styles.novelsTabBarLabels
            }}>
            <BottomTab.Screen name="Profile" component={ProfileScreen} options={{ title: "Profile" }} />
        </BottomTab.Navigator>
    );
}

function SelectedNovelNavigation() {
    return (
        <BottomTab.Navigator
            tabBarOptions={{
                labelStyle: styles.novelsTabBarLabels
            }}>
            <BottomTab.Screen name="Novel" component={NovelScreen} />
            <BottomTab.Screen name="Comments" component={CommentsScreen} options={{ title: "Comments" }} />
            <BottomTab.Screen name="Ratings" component={RatingsScreen} options={{ title: "Ratings" }} />
            <BottomTab.Screen name="Related" component={RelatedNovelsScreen} options={{ title: "Related" }} />
        </BottomTab.Navigator>
    )
}

Я хочу, чтобы когда пользователь нажимал вкладку Profile в стеке TabNavigation, навигация заставляла пользователя показывать ProfileNavigation, где я могу добавить дополнительные вкладки профиля, но я просто не могу правильно подключить это. Смотрел документы и другие сообщения об этом, но все равно застрял.

Заранее благодарю за любую помощь