Function in stack that gets rendered if the user is logged in, executes after the user has logged out, resulting in a network error

My App.tsx file renders 2 different components based on the authentication state:

{!isAuthenticated ? <AuthStack /> : <RootNavigation />}

The problem is that when I am on a screen in the <RootNavigation /> and I logout, a function from one of the components in the <RootNavigation /> executed which makes a GET request to the server, but since I am no longer authenticated, the GET request fails.

const Home: FunctionComponent<ScreenProps> = () => {
    const { data: article, isLoading } = useGetArticle('home'); // This GET request fails

    if (!article || isLoading) return <LoadingIndicator />;

    return (
        <Container>
            <Article article={article} />
        </Container>
    );
};

export default Home;

My understanding is that once I log out, this component would unmount and the would get mounted, which is what actually happens. What I don't understand is why it makes a GET request once more before unmounting.

AuthStack Component

const AuthStack: FunctionComponent = () => {
    const navigation = useNavigation<LandingScreenNavigationProp>();
    const { ref, setFocus } = useAccessibilityFocus<View>();

    const { t } = useTranslation('log_in');

    const renderTitle = useCallback((title: string) => <NavigationHeaderTitle ref={ref} title={title} />, [ref]);

    return (
        <Stack.Navigator
            initialRouteName="Landing"
            screenListeners={{ transitionEnd: setFocus }}
        >
            <Stack.Screen options={{ headerShown: false }} name="Landing" component={Landing} />
            <Stack.Screen
                name="EnterEmail"
                component={EnterEmail}
            />
            <Stack.Screen name="EnterPassword" component={EnterPassword} />
            <Stack.Screen
                name="EnterOTP"
                component={EnterOTP}
            />
            <Stack.Screen
                name="CreateAnAccount"
                component={CreateAnAccount}
            />
            <Stack.Screen
                name="CheckYourEmail"
                component={CheckYourEmail}
            />
            <Stack.Screen options={{ headerShown: false }} name="AuthWebView" component={WebView} />
        </Stack.Navigator>
    );
};

export default AuthStack;