Screens Navigation in React-Native

I have the following structure of screens and I am not sure how to do them. I have a bottom tab screen, where each bottom tab is stack of screens by itself. but before coming to the bottom tab screen, I want to authorize the user. so I have another stack of screens to deal with authentication. How do I make this possible(i.e. when a user starts the app, if that user is already logged in, then they will be presented with the bottom tabs page but if they haven't signed in, then they will be presented with signup/signin page).
I have included the following for more context:
Authentication page

const authentication = createNativeStackNavigator();
const AuthorizationScreen = ({navigation}) => {
    const {bgcolr}  = React.useContext(ThemeContexts)
  return (
    <>
    <authentication.Navigator initialRouteName="Welcome" screenOptions={{tabBarVisible: true,headerStyle:{backgroundColor:bgcolr}}} >
        <Authorization.Screen name='Signup' component={Signup} />
        <Authorization.Screen name='Signin' component={Signin} />
    </authentication.Navigator>
    </>
  )
}

Bottom tabs page

const MyTabs = ({navigation})=>{
    const Tab = createBottomTabNavigator();
    return (
        
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeStackScreen} />
            <Tab.Screen name="Profile" component={ProfileStackScreen}/> 
        </Tab.Navigator>
    )
}

and in home tab of the bottom tab the following stack of screens exist

const ProfileStack = createNativeStackNavigator();
const ProfileStackScreen = () => {
  return (
    <>
    <ProfileStack.Navigator initialRouteName = "Profiles">
        <ProfileStack.Screen name ="Profiles" component={Profile}/>
        <ProfileStack.Screen name="settings" component={Settings}/>
        <ProfileStack.Screen name="Logout" component={Logout} />
    </ProfileStack.Navigator>
    </>
  )
}

so I want to display a user with a authorization screen if they haven't already signed in. but show them MyTabs bottom tab if they have already Signin when they first opened the app. How do I do that. Also, once the user has signed in, if the logout, they are presented with the authorization screen again. I know I need to use, Asyncstorage to save authorization properties. but I don't know how to proceed beyond that.

Good day. I highly recommend checking this official website of react native navigation. it's well-documented and explains how you show screens based on what the user signs in: it will show specific screens, and if not, it will show the authentication screen. I followed them at work, using the redux toolkit as global state management, and this architecture's absolutely amazing. good luck.
https://reactnavigation.org/docs/auth-flow/

To use Stack navigation, You can use like this

<NavigationContainer ref={navigationRef}>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName={YourInitialScreenName}>
            <Stack.Screen name={YourInitialScreenName} component={YourInitialScreen}/>
            <Stack.Screen name={Routes.Dashboard} component={CustomTabComponent} />
      </Stack.Navigator>
</NavigationContainer>

For tab navigation you have to do code like this:

<Tab.Navigator
            screenOptions={{
              headerShown: false,
            }}
            initialRouteName={Routes.Home}
            tabBar={props => <CustomTabBar {...props} />}>
      <Tab.Screen name={Routes.Home} component={Home}/>
</Tab.Navigator>

For more details of stack navigation, you can check this link:-
https://reactnavigation.org/docs/stack-navigator

For tab navigation details check below link
https://reactnavigation.org/docs/bottom-tab-navigator