React context changes but it doesn't change the screen

I am creating an app with react and I created a login system with ReactContext where there is a variable named userToken that allows the user to change from the stackNavigator of the login to the one of the main app because I created a stack with some screens for the login and another stack with other screens. When clicked on the button located in the login page it should hange the value of the variable and change screens but somehow it doesn't work.

This is the ReactContext

import React, { useState } from "react";

export const AppContext = React.createContext();

export function Context({ children }) {
  const [userToken, setUserToken] = useState(null);
  const [isLoading, setisLoading] = useState(false);

  const login = () => {
    setisLoading(false);
    setUserToken("iojoiajsdoijaso");
  };

  const logout = () => {
    setisLoading(false);
    setUserToken(null);
  };

  return (
    <AppContext.Provider value={{ login, logout, userToken }}>
      {children}
    </AppContext.Provider>
  );
}

Here is the navigator in charge of changing the screens when the variable is changed

    import { FA5Style } from "@expo/vector-icons/build/FontAwesome5";
    import { NavigationContainer } from "@react-navigation/native";
    import { createNativeStackNavigator } from "@react-navigation/native-stack";
    import { useContext } from "react";
import { AppContext, Context } from "../Contexts/Context";
import AppStack from "../Navigation/AppStack";
import AuthStack from "../Navigation/AuthStack";
import BottomNavBar from "../Navigation/BottomNavBar";

const MainNav = createNativeStackNavigator();

function AppNav() {
  const userToken = useContext(AppContext);
  return (
    <Context>
      <NavigationContainer>
        {userToken == null ? <AuthStack /> : <AppStack />}
      </NavigationContainer>
    </Context>
  );
}

export default AppNav;

and this is how I call the react context in my Login screen once the button is pressed.

  <CustomButton label={"Login"} onPress={() => login()} />

My problem is that once I click on this button in the LoginScreen the value of the variable "userToken" changes but the trinary operator doesn't seem to work and it doesn't change the stack so the user can see the user can see the Appstack when userToken changes. I tried different variations of the trinary operator.
I think the error is beacuse it's executing just one time.

How could I fix this?

The value passed via your context provider is an object with three fields: login, logout and userToken. So, when you read the value using useContext, you are getting an object.

  const userToken = useContext(AppContext); // WARNING: userToken is an object here

Try replacing the previous line with:

  const appContext = useContext(AppContext);
  const userToken = appContext ? appContext.userToken : null

<strike>This uses object destructuring to extract the userToken field form the value passed by the context.</strike>