React Native - Why doesn't my app change screens after state is updated?

Question

In my App.js I call a function that checks the local storage to see if the user is logged in:

function App() {
  const {state, tryLocalStorage} = useContext(AuthContext);

  useEffect(() => {
    tryLocalStorage();
  }, []);

  return (
    <NavigationContainer ref={navigationRef}>
      <View style={styles.root}>
        <StatusBar barStyle="light-content" />
        {state.user === 'true' ? <MainFlow /> : <AuthFlow />}
      </View>
    </NavigationContainer>
  );
}

When user logs in, if they are new they go to on board screen if not, it switches to the MainFlow and go directly to home screen.

In my Login Screen when user logs in I have this function:

const login = dispatch =>() => {
  try {
    axios
      .get(url)
      .then(res => {
        const user = res.data;
        if (user) {
          RNSInfo.setItem('user', 'true', {});
          dispatch({type: 'user', payload: 'true'});
        } else dispatch({type: 'user', payload: 'false'});
      });
  } catch (err) {
    dispatch({
      type: 'error_1',
      payload: 'error',
    });
  }
};

After I successfully log in, my state updates and my console logs the updated state from my home screen in the MainFlow which means that it should successfully switch to MainFlow, but the problem is that the screen doesn't switch to the home screen until I refresh the screen.

In my useReducer I have default state value like this:

const defaultValue = {
  user: 'false',
  error_1: '',
};

When I console log state.user in my App.js before I log in I get, undefined

After I log in I get:

undefined
undefined
undefined
true

I feel like that is where my problem is coming from but not sure and don't know how to fix.

Appreciate any help!