React Native + Firebase - How to navigate to login screen after log-out?

I want to set up authentication in my app, so I'm using firebase (I'm new to Firebase and authentication in react native in general).

When I open the app, for some reason it is already logged in, and displays AppStack, instead of AuthStack which is supposed to be the LoginScreen. When I run this code inside my AppStack on a component:

onPress={() => {firebase.auth().signOut().then(function() {
  console.log('Signed Out');
}, function(error) {
  console.error('Sign Out Error', error);
});}}>

it successfully logs 'Signed Out', but it doesn't switch screens.

I know the problem lies in my state variable, isLoggedIn, but I don't know how to fix it.

So this is my app.js, would really appreciate any feedback on how to make this work.

import * as React from "react";
...
import * as firebase from 'firebase';

var firebaseConfig = {
    ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function AuthStack() {

    return(
    <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
    </Stack.Navigator>)}

function AppStack() {
    return (
    <Tab.Navigator
        screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                if (route.name === 'Order') {
                    return (
                        <IconWithBadge
                            name={focused ? 'ios-book' : 'ios-book'}
                            size={size}
                            color={color}
                        />
                    );
                } else if (route.name === 'Map') {
                    return (
                        <Ionicons
                            name={focused ? 'md-globe' : 'md-globe'}
                            size={size}
                            color={color}
                        />
                    );
                } else if (route.name === 'Profile') {
                    return (
                        <Ionicons
                            name={focused ? 'md-contact' : 'md-contact'}
                            size={size}
                            color={color}
                        />
                    )
                } else if (route.name === 'Notifications') {
                    return (
                        <Ionicons
                            name={focused ? 'ios-notifications-outline' : 'ios-notifications-outline'}
                            size={size}
                            color={color}
                        />
                    )
                }
            },
        })}
        tabBarOptions={{
            activeTintColor: 'orange',
            inactiveTintColor: 'gray',
        }}>
        <Tab.Screen name="Order" component={OrderScreen} />
        <Tab.Screen name="Map" component={MapScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>)}


export default class App extends React.Component {
    state = {
        isLoggedIn: firebase.auth().onAuthStateChanged(user => { return user}),
    }

    render() {
    return(
        <NavigationContainer>
            { this.state.isLoggedIn ? (<AppStack />) : (<AuthStack />) }
        </NavigationContainer>
    )}
}


function Notifications() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Notifications</Text>
        </View>
    );
}