how to access navigation outside of navigationcontainer - react-native

Question

here I am trying to add navigation to my react-native project, the button register should navigate to the success page component but only issue is the button register exists out of the navigation container
here I am trying to access "navigation" outside of navigation container
here's the navigation container:
import * as React from 'react';
import { Text, View, StyleSheet,Image,TouchableHighlight,TextInput,
Button, } from 'react-native';
import Constants from 'expo-constants';
import logo from './assets/logo4.png'
import logo2 from './assets/CFA_approved_prep_provider_RGB.png'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { enableScreens } from 'react-native-screens';
import { Component } from 'react';
import * as Font from 'expo-font';
import { useRef } from "react";
import logo3 from './assets/logo3.png'
enableScreens();
const Stack = createStackNavigator();
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const navigationRef = useRef(null)
return (
<View style={{flex: 1,
justifyContent: 'center',
backgroundColor:'white',}}>
<NavigationContainer ref={navigationRef}>
<Stack.Navigator initialRouteName="SplashScreen">
<Stack.Screen name="SplashScreen" component={SplashScreen} />
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={Details} />
<Stack.Screen name="SuccessPage" component={SuccessPage} />
</Stack.Navigator>
</NavigationContainer>
</View>
here I am trying to access it like that:
<View style={[{ width: "90%", margin: 10 }]}>
<Button
onPress={() => navigationRef.current.navigate("SuccessPage")}
title="Register"
/>
</View>
that's the error:
screenshot here
any idea what else can be done?