React Native - Error when i want to navigate

Question

I have an error when i try to navigate using react.navigation.

I also have a visual bug since i've added react navigation.

Here's my code for app.js :

import React, { useState } from "react";
 import {
   StyleSheet,
   Text,
   View,
   Image,
   TextInput,
   Button,
   TouchableOpacity,
 } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import RegisterScreen from './RegisterScreen';
const Stack = createNativeStackNavigator();

 export default function App() {


   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
  const link = "./Ressources/logoressources.png";

  /*async function ClickLogin(){
    alert(email);
    l
  }
  async function ClickRegister(){
    alert(email);
    
  }
  async function ClickMotDePasseOublie(){
    alert("Fallait pas l'oublier (Veuillez l'ecrire sur un papier que vous nous remettrez la prochaine fois)");
    
  }*/
  //<Stack.Navigator>
 /* <Stack.Screen
            name="Home"
            component={HomeScreen}
          />*/
          //</Stack.Navigator>
   return (
    <NavigationContainer>
       <Stack.Navigator 
       screenOptions={{
    headerShown: false
    }}>
        <Stack.Screen
            name="Home"
            component={HomeScreen}
            />
            <Stack.Screen
            name="Register"
            component={RegisterScreen}
        />
        
        </Stack.Navigator>
    <HomeScreen />
     
     </NavigationContainer>
   );
 }
  

Here the code of the HomePage.js :

import React, { useState } from "react";
 import RegisterScreen from './RegisterScreen';
 import {
   StyleSheet,
   Text,
   View,
   Image,
   TextInput,
   Button,
   TouchableOpacity,
 } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
//import HomeScreen from './HomeScreen';
const Stack = createNativeStackNavigator();

 const HomeScreen = ({navigation}) => {


   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
  const link = "./Ressources/logoressources.png";

  async function ClickLogin(){
    alert(email);
  }
  async function ClickRegister(){
    navigation.navigate("Register");
    
  }
  async function ClickMotDePasseOublie(){
    alert("Fallait pas l'oublier (Veuillez l'ecrire sur un papier que vous nous remettrez la prochaine fois)");
    
  }
  //<Stack.Navigator>
 /* <Stack.Screen
            name="Home"
            component={HomeScreen}
          />*/
          //</Stack.Navigator>
   return (
    
    
    
     <View style={styles.container}>

       
       <Image style={styles.image} source={require(link)} />
  
      
       <View style={styles.inputView}>
         
         <TextInput
           style={styles.TextInput}
           placeholder="Email"
           placeholderTextColor="#003f5c"
           onChangeText={(email) => setEmail(email)}
         />
       </View>
  
       <View style={styles.inputView}>
         <TextInput
           style={styles.TextInput}
           placeholder="Mot de passe"
           placeholderTextColor="#003f5c"
           secureTextEntry={true}
           onChangeText={(password) => setPassword(password)}
         />
       </View>

       <View style={styles.inputViewConfirm}>
         <TextInput
         
           style={styles.TextInput}
           placeholder="Confirmer mot de passe"
           placeholderTextColor="#003f5c"
           secureTextEntry={true}
           onChangeText={(password) => setPassword(password)}
         />
       </View>

  
       <TouchableOpacity onPress={ClickMotDePasseOublie}>
         <Text style={styles.forgot_button}>Mot de passe oublié ?</Text>
         
       </TouchableOpacity>

       <TouchableOpacity onPress={ClickRegister}>
         <Text style={styles.Register_button}>Pas de compte ? Inscrivez-vous !</Text>
       </TouchableOpacity>


       <TouchableOpacity style={styles.loginBtn} 
       onPress={ClickLogin}>
         <Text style={styles.loginText}>Se connecter</Text>
       </TouchableOpacity>
     </View>
     
   
   );
 }
  
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "#16a085",
     alignItems: "center",
     justifyContent: "center",
   },
  
   image: {
     marginBottom: 10,
     height: 200,
   },
  
   inputView: {
     backgroundColor: "#A6E4E7",
     borderRadius: 30,
     width: "75%",
     height: 45,
     marginBottom: 20,
  
     alignItems: "center",
   },

   inputViewConfirm: {
    backgroundColor: "#A6E4E7",
    borderRadius: 30,
    width: "75%",
    height: 45,
    marginBottom: 20,
 
    alignItems: "center",
  },
  
   TextInput: {
     height: 50,
     flex: 1,
    
     marginLeft: 10,
   },
  
   forgot_button: {
     height: 30,
     marginBottom: 20,
   },
   Register_button: {
    color: "#4834d4",
    height: 30,
    marginBottom: 10,
  },
  
   loginBtn: {
     width: "80%",
     borderRadius: 25,
     height: 50,
     alignItems: "center",
     justifyContent: "center",
     marginTop: 5,
     backgroundColor: "#88FFDD",
   },
 });

export default HomeScreen;

And the registerScreen Code :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const RegisterScreen = ({navigation}) =>  {
  
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>
      </View>
    );
  
}

// ...

export default RegisterScreen;

This is my error :

And now a screenshot of the render of the application :

Do you have a solution for me ?

I Have tryed to remove the top navigation bar to realign the interface but nothing worked.

I also verified my routes for the redirection bug, already searched answers on the internet and in the documentation but nothing got found.