Go from child navigation to parent navigation - react-native

Question

I have two NavigationContainer. What I want is when I am on the SignIn screen go to the MainPage. And the problem goes when I am in MainPage > Profile. The Button Logout does not go to the SignIn Screen.
App.js
import React from "react";
import {SignIn} from './src/screen/authentication/signIn'
import {SignUp} from "./src/screen/authentication/signUp";
import {MainPage} from "./src/screen/drawer";
import {createStackNavigator} from "#react-navigation/stack";
import {NavigationContainer} from "#react-navigation/native";
const Stack = createStackNavigator();
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="SignIn" headerMode={null}>
<Stack.Screen name="SignIn" component={SignIn} />
<Stack.Screen name="SignUp" component={SignUp} />
<Stack.Screen name="Home" component={MainPage} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
drawer.js
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import {createDrawerNavigator} from '#react-navigation/drawer';
import {Dashboard} from "./dashboard/dashboard";
import {AddWidget} from "./addWidget/addWidget";
import {Profile} from "./profile/profile";
const Drawer = createDrawerNavigator();
export function MainPage({navigation}) {
return(
<NavigationContainer independent={true}>
<Drawer.Navigator>
<Drawer.Screen name="Dashboard" component={Dashboard} />
<Drawer.Screen name="Add widget" component={AddWidget} />
<Drawer.Screen name="Profile" component={Profile} initialParams={{navigation: () => navigation.navigate('SignIn')}} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Profile.js
import * as React from 'react';
import {Button, Text, View} from "react-native";
import {useHistory} from "react-router-dom";
import {styles} from "./styles"
export function Profile({navigation}) {
const history = useHistory();
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.title}>Username</Text>
<Button title="Logout" onPress={() => navigation.navigation} />
</View>
);
}

Answer 1

A trick that I found is printing props with console.log and finding the function inside the object.
So what I did is changing the name of initialparams from Profile, navigation to parentNaivgation. And also removing ({navigation}) to (props) in the Profile component.
At the end, the route to finding the function navigation was props.route.params.parentNavigation.navigate("SignIn")

Answer 2

you should be able to just do this:
<Button title="Logout" onPress={() => navigation.navigate("SignIn")} />
if the above doesn't work, you can try this:
import * as React from 'react';
import {Button, Text, View} from "react-native";
import {useHistory} from "react-router-dom";
import { useNavigation } from '#react-navigation/native';
import {styles} from "./styles"
export function Profile() {
const history = useHistory();
const navigation = useNavigation();
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.title}>Username</Text>
<Button title="Logout" onPress={() => navigation.navigate("SignIn")} />
</View>
);
}