I simply want my render method code run after update state in useEffect.

I store my token in asyncStorage and now I want if token exist then it redirect at homePage else return at loginPage. But problem is that render method run before updating my state in useEffect. And it keeps me on loginPage even I had token.

My code Is below:

import React, { useEffect, useState } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { StyleSheet, Text, View} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useLinkProps, useNavigation, CommonActions } from '@react-navigation/native';

import MainScreen from './src/screens/MainScreen';
import SignIn from './src/screens/SignIn';

const Stack = createStackNavigator();

const App = props => {

  const [isSigned, setIsSigned] = useState(false);

  useEffect(async () => {
    let token = await AsyncStorage.getItem("@token");

    console.log("token", token);

    if (token) {
      setIsSigned(true);
      props.navigation.navigate('MainScreen');
    }
    else {
      setIsSigned(false);
      props.navigation.navigate('SignIn');
    }
  }, [])


  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName={isSigned ? "MainScreen" : "SignIn"}
        screenOptions={{
          headerShown: false
        }}
      >
        <Stack.Screen name="Login" component={SignIn} />
        <Stack.Screen name="MainScreen" component={MainScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'android' ? '3%' : '10%'
  }
});

export default App;