State does not update its value using AsyncStorage in react-native

I am trying to save a value to async storage and then navigate to the right page depending on what the value outcome is from the Async storage. I can store data in AsyncStorage but my states does not update, I have to reload the app in order for the state to update. here is my code:

Here I have a Welcome/Obnoarding screen. I want this screen to only show to the new app users. So when a user presses the continue button I want to save a value to the Async storage so that the next time they log in they don't have to see the onboarding page again. Here is my Onboarding page:

const WelcomeScreen: FC<IWelcomeScreen> = ({ navigation }) => {  const { width, height } = Dimensions.get("window");  const btnText = "Contiunue";  const title = "Book";  const subTitle = "Fab";  let [fontsLoaded] = useFonts({    PinyonScript_400Regular,  });  const continueBtn = async () => {    try {      await AsyncStorage.setItem('@viewedOnboarding', 'true');    } catch (error) {      console.log('Error @setItem: ', error);    };  };  if (!fontsLoaded) {    return <Text>...Loading</Text>;  } else {    return (<View style={containerStyle(height, width).container}><ImageBackground          resizeMode={"cover"}          style={styles.image}          source={require("../assets/model.jpg")}><LinearGradient            colors={["#00000000", "#000000"]}            style={styles.gradient}><View style={styles.container}><View style={styles.logoTextContainer}><Text style={styles.logoText}>{title}</Text><Text style={styles.logoText}>{subTitle}</Text></View><ContinueBtn label={btnText} callback={continueBtn} /></View></LinearGradient></ImageBackground></View>    );  }};

In my AppNavigator I want to decide which navigation the user should see. But when I press the continue page my app does not navigate to my TabsNavigator. It stays on my Onboarding page but if I refresh the app then the app navigates to my Tabs navigator. here is the code where I determine where the user should be depending if they are a new user or a "old" user:

const WelcomeScreen: FC<IWelcomeScreen> = ({ navigation }) => {  const { width, height } = Dimensions.get("window");  const btnText = "Contiunue";  const title = "Book";  const subTitle = "Fab";  let [fontsLoaded] = useFonts({    PinyonScript_400Regular,  });  const continueBtn = async () => {    try {      await AsyncStorage.setItem('@viewedOnboarding', 'true');    } catch (error) {      console.log('Error @setItem: ', error);    };  };  if (!fontsLoaded) {    return <Text>...Loading</Text>;  } else {    return (<View style={containerStyle(height, width).container}><ImageBackground          resizeMode={"cover"}          style={styles.image}          source={require("../assets/model.jpg")}><LinearGradient            colors={["#00000000", "#000000"]}            style={styles.gradient}><View style={styles.container}><View style={styles.logoTextContainer}><Text style={styles.logoText}>{title}</Text><Text style={styles.logoText}>{subTitle}</Text></View><ContinueBtn label={btnText} callback={continueBtn} /></View></LinearGradient></ImageBackground></View>    );  }};