I am trying to use navigation in react native, but it gives me an error when I try use a component with navigate (LogIn) with the

 <Login/>

tags.

It says that navigate is undified so I passed the navigation as a prop with no success

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import Login from "./assets/code/Login.js";
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-gesture-handler';

const Stack = createStackNavigator();

export default function App({ navigation }) {

  return (


    <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen

        name="Welcome to dog app, and I hate react"
        component={HomePage}
        
        />
    </Stack.Navigator>
  </NavigationContainer>
  );

}


function HomePage({ navigation }) {

  return (
    <View style={styles.container}>
      <View>
        <Text> {""}Welcome to dogappcoolapp app</Text>
      </View>
      <View style={styles.blue}>
        <Login navigate={ navigation } style={styles.blue} />
      </View>
    </View>

  )


}

The error is in this line

        <Login navigate={ navigation } style={styles.blue} />

The error is

The LogIn function is in

LogIn.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, Script, Alert } from 'react-native';
import { NavigationContainer, StackActions, } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-gesture-handler';

const Stack = createStackNavigator();

export function Login({navigation}) {


  if (true)
    return (
      
      navigation.navigate('WelcomePage')

    );

}

function WelcomePage () {
  return (

    <View>
      <Button title="enter" />
      <Text> dog app dog woof-app{"\n\n\n\n\n\n\n\n\n"}OMG!! YOU ARE LOGGED IN! WELCOME!{"\n\n\n\n\n"}</Text>
    </View>

  );
}


const styles = StyleSheet.create({
  blue: {
    flex: 2,
    backgroundColor: "dodgerblue",
    alignItems: 'center',
    justifyContent: 'center',
  },
});



export default Login;

If I remove all of the navigation prop and tags from the function LogIn, then I can use LogIn as a componnent with <LogIn/>, but not with navigation, I tried usinng it with

navigate={ navigation }

(As it is in the code that I posted)

and I tried without it, I keep getting similar errors.

How can I use LogIn as a component with </> tags while still having navigation component in it?