I have been struggling with this for days now... When I try to login it does not automatically navigate me to home screen, unless I close and open app. I am working with 3 separate components. However after I register once, this issue doesn't occur it only happens with new accounts.

const [userAuth, setUserAuth] = useState()

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(user => {
            user && auth.currentUser?.emailVerified ? setUserAuth(true) : setUserAuth(false)
        })
        return unsubscribe
    })

    return (
        <Provider store={store}>
            <NavigationContainer>
                <Drawer.Navigator>
                    <Drawer.Screen
                        name='main'
                        component={userAuth ? MainDrawer : AuthStack}
                    />
                </Drawer.Navigator>
            </NavigationContainer>
        </Provider>

This is my MainDrawer.js

export default function MainDrawer() {
    return (
        <Drawer.Navigator drawerContent={props => <DrawerScreen {...props} />}>
            <Drawer.Screen
                name='drawer'
                component={HomeStack}
                options={{ headerShown: false }}
            />
        </Drawer.Navigator>
    )
}

This is my HomeStack.js

    <Stack.Navigator initialRouteName='home'>
        <Stack.Screen name='home' component={TabNav}/>
        <Stack.Screen name='about' component={AboutUs}/>
        <Stack.Screen name='faq' component={FaqScreen}/>
        <Stack.Screen name='userTerms' component={TermsScreen} />
        <Stack.Screen name='privacy' component={PrivacyScreen} />
</Stack.Navigator>