React Native navigation: Screen not updating after login attempt

So I am trying to make a login screen and a home page. If the login button is pressed the requireauth component switches to comp. But I found out that that function is not updating when the button is pressed.

import {View, Text, Button, Platform} from 'react-native';import {NavigationContainer} from '@react-navigation/native';import {createNativeStackNavigator} from '@react-navigation/native-stack';var loggedIn = false;function RequireAuth(Comp: any) {console.log("requirecomp", loggedIn)return(\<View\>{loggedIn === true? <Comp/\>: <LoginPage/\>}\<View\>)}const Stack = createNativeStackNavigator();function App() {return (<NavigationContainer\><Stack.Navigator\><Stack.Screen name="Home"\>{props => <RequireAuth {...props} Comp={HomePage}\>}<Stack.Screen\><Stack.Navigator\><NavigationContainer\>);}function HomePage() {return(<View\><Text\>This is the home page<Text\><View\>)}function LoginPage() {return(<View\><Text\>This is the login page<Text\><Button title='Log In Please' onPress={() => {console.log("pressed"); loggedIn=true;}}\></View\>)}

I printed the variable loggedIn but it did not change after pressing the button. I found posts that offered a different solution, by handling the login step differently, but I would like to know if it is possible to do it in the way I intended.