Can't change variable when using Firebase onAuthStateChanged - firebase

Question

I'm writing an app in React Native and I'm trying to make the app change screen automatically depending on if the user is logged in or not.
Everything works except that the variable isSignedIn is undefined so what I need help with is how to define it inside onAuthStateChanged.
Thankful for help!
Here is my code:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import React, { useEffect, useState } from 'react';
import { NavigationContainer, useNavigation } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import { useFonts } from 'expo-font';
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { auth } from './app/config/firebase';
import IntroSliderScreen from './app/screens/introSlider';
import FirstScreenScreen from './app/screens/firstScreen';
import LogInScreen from './app/screens/logIn';
import OverrideScreen from './app/screens/override';
import SignUpScreen from './app/screens/signUp';
import HomeScreen from './app/screens/mainTabs/home';
import KartaScreen from './app/screens/mainTabs/karta';
import MatScreen from './app/screens/mainTabs/mat';
import MoreScreen from './app/screens/mainTabs/more';
import ProgramScreen from './app/screens/mainTabs/program';
import Push from './app/config/push';
const Stack = createNativeStackNavigator();
const Tab = createMaterialBottomTabNavigator ();
function MainTabs() {
return(
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Program" component={ProgramScreen} />
<Tab.Screen name="Karta" component={KartaScreen} />
<Tab.Screen name="Mat" component={MatScreen} />
<Tab.Screen name="More" component={MoreScreen} />
</Tab.Navigator>
);
}
export default function App() {
const [loaded] = useFonts({
PirataOne: require('./app/assets/fonts/PirataOne-Regular.ttf'),
RobotoMono: require('./app/assets/fonts/RobotoMono-VariableFont_wght.ttf'),
});
if (!loaded) {
return null;
};
var isSignedIn;
//const [isSignedIn, setIsSignedIn] = useState(false);
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in
// https://firebase.google.com/docs/reference/js/firebase.User
const uid = user.uid;
// ...
console.log('Inloggad med UserID: ' + uid);
//setIsSignedIn(true);
} else {
// User is signed out
// ...
console.log('Ej inloggad');
}
});
return (
<NavigationContainer>
{isSignedIn ? (
<Stack.Navigator>
<Stack.Screen name='MainTabs' component={MainTabs} />
<Stack.Screen name="IntroSliderScreen" component={IntroSliderScreen} />
</Stack.Navigator>
) : (
<Stack.Navigator>
<Stack.Screen options={{headerShown: false}} name="FirstScreenScreen" component={FirstScreenScreen} />
<Stack.Screen name="SignUpScreen" component={SignUpScreen} />
<Stack.Screen name="LogInScreen" component={LogInScreen} />
</Stack.Navigator>
)}
</NavigationContainer>
);
}
/* <Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
<Stack.Screen name="OverrideScreen" component={OverrideScreen} />
<Stack.Screen name="Push" component={Push} />
</Stack.Group> */