Why does my screen in react native show that the parameters I passed through my navigation are undefined? - react-native

Question

So in summary I'm trying to pass my 'name' variable from my 'Signup.js' screen to my 'Home.js' by passing parameters to routes through my navigation.navigate() function.
So Here's my Signup.js Screen:
import firebaseConfig from '../firebase';
import {
Pressable,
Text,
TextInput,
View,
ActivityIndicator,
} from 'react-native';
import {useNavigation} from '#react-navigation/native';
import {initializeApp} from 'firebase/app';
import {
getAuth,
createUserWithEmailAndPassword,
onAuthStateChanged,
} from 'firebase/auth';
import React, {useState, useEffect} from 'react';
import styles from './Stylesheets/Signup-Stylesheet';
const Signup = () => {
const navigation = useNavigation();
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const [name, setName] = useState(''); //THIS VARIABLE NEEDS TO GO TO HOME.JS
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
function handleSignUpData() {
console.log(name);
setLoading(prevLoading => !prevLoading);
createUserWithEmailAndPassword(auth, email, password)
.then(userCredential => {
const user = userCredential.user;
})
.catch(error => alert(error.message));
}
useEffect(() => {
onAuthStateChanged(auth, user => {
if (user) {
navigation.navigate('Home', {name: name});
}
});
}, []);
return (
<View style={styles.container}>
<View style={styles.welcome}>
<Text style={styles.welcomeText}>
Hello! Tell me more about yourself:
</Text>
</View>
<View style={styles.form}>
<TextInput
onChangeText={text => setName(text)}
placeholderTextColor={'#3c2a21'}
placeholder="Name"
style={styles.input}
/>
<TextInput
onChangeText={text => setEmail(text)}
placeholderTextColor={'#3c2a21'}
placeholder="Email"
style={styles.input}
/>
<TextInput
onChangeText={text => setPassword(text)}
secureTextEntry
placeholderTextColor={'#3c2a21'}
placeholder="Password"
style={styles.input}
/>
<Pressable onPress={handleSignUpData} style={styles.submit}>
{loading ? (
<ActivityIndicator size="large" color="black" />
) : (
<Text style={styles.submitText}>Submit</Text>
)}
</Pressable>
</View>
</View>
);
};
export default Signup;
And here's my Home.js screen:
import {StyleSheet, Text, View, BackHandler, Alert} from 'react-native';
import React from 'react';
const Home = ({route}) => {
console.log(route.params.name);
At this point in time as long as it logs it to the console it's fine. But I keep getting this error:
cannot read property 'name' of undefined
I've gone through the react navigation docs and I'm still not sure what's wrong with my code. Maybe It's the useEffect() function? So I'd really like some help here!
I've tried to change the parameters to something like:
navigation.navigate('Home', {username: name}) but I still get the same error.