How to load second component in react-native navigation should show back button

Actually what i am trying i have push notification functionality in react native application. When user clicks on notification i need to load notification component and it should contain back button, Once i click back button it should navigate to home screen. I am trying to load Notification component from Home component useEffect. It is working but before showing notification screen i don't want to see Home screen.

code:

function HomeScreen({navigation}: {navigation: any}) {
  useEffect(() => {
    navigation.navigate('Notification');
  }, []);

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Notification')}
      />
    </View>
  );
}
function Notification() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Notifications Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

const App = () => {
  const backgroundStyle = {
    backgroundColor: 'white',
    flex: 1,
  };
  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar backgroundColor={'white'} />
      <View
        style={{
          flex: 1,
          backgroundColor: 'white',
        }}>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Notification" component={Notification} />
          </Stack.Navigator>
        </NavigationContainer>
      </View>
    </SafeAreaView>
  );
};