React native – How to pass parameters in navigation handle to a different screen than you are navigating to?

I have a LogIn screen in my app and when the login button is tapped with the username/pass, I am trying to pass result.user parameter to my screen named "User Profile" while navigating to "BottomTabs" at the same time so I can display the username and password of the current logged in user in the User Profile screen. However, the following code below is producing undefined paramters and I cannot seem to get it to pass through correctly.

Login.js

import { verifyUser, addUser } from '../DBA/DBAdapter';

const handleLogin = () => {
    if (username.length === 0 || password.length === 0) {
      setLoginError('Please fill in both username and password.');
      showToast('Please fill in both username and password.');
    } else if (username.length <= 7) {
      setLoginError('Username should be at least 8 characters long.');
      showToast('Username should be at least 8 characters long.');
    } else if (password.length <= 7) {
      setLoginError('Password should be at least 8 characters long.');
      showToast('Password should be at least 8 characters long.');
    } else {
      verifyUser(username, password, (result) => {
        if (result.success) {
          loginUser(result.user.username);
          **navigation.navigate('BottomTabs', {
            screen: 'User Profile',
            params: { user: result.user },
          });**
        } else {
          setLoginError('Invalid credentials. Please check your username and password.');
          showToast('Invalid credentials. Please check your username and password.');
        }
      });
    }
  };

User Profile.js

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, TouchableOpacity, Image, StyleSheet, ScrollView } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import DateTimePickerModal from "react-native-modal-datetime-picker";

const Profile = ({ route }) => {
  console.log(route);
  const  = useState('');
  const [setUsername, setPassword] = useState('');
}

//rest of code below

App.js:

import React, { createContext, useState, useEffect } from 'react';
import { StyleSheet, } from 'react-native';
import BarCodeScan from './screens/BScanner';
import Favorites from './screens/Favorites';
import ProductInfo from './screens/ProductInfo';
import BottomTabs from './components/BottomTabs';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TermsAndService from './screens/terms_and_service';
import { ListProvider } from './screens/ListContext';
import AboutUs from './screens/About Us';
import ProductDetailScreen from './screens/ProductDetail';
import WikiScreen from './screens/WikiScreen';
import Nutrition from './screens/Nutrition';
import Login from './components/Login';
import { initializeDB } from './DBA/DBAdapter';
import ChangePassword from './components/ChangePassword';
import Settings from './screens/Settings';
import UserProfile from './screens/User Profile';

const Stack = createStackNavigator();

export const GlobalContext = createContext();

export default function App() {
  const [user, setUser] = useState(null);

  const loginUser = (username) => {
    const user = { id: 1, name: username };
    setUser(user);
  };

  const logoutUser = () => {
    setUser(null);
  };

  useEffect(() => {
    initializeDB();
  }, []);

  return (
    <GlobalContext.Provider value={{ loginUser, logoutUser }}>
      <ListProvider>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen name="BottomTabs" options={{ headerShown: false, title: 'Back'}} component={({ navigation }) => ( <BottomTabs screenProps={{ navigation }} /> )} />
            <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
            <Stack.Screen name="ProductInfo" component={ProductInfo} options={{ title: 'Product Details' }} />
            <Stack.Screen name="WikiScreen" component={WikiScreen} options={{ title: 'Wikipedia' }} />
            <Stack.Screen name="ProductDetails" component={ProductDetailScreen} options={{ title: 'Product Details' }} />
            <Stack.Screen name="Nutrition" component={Nutrition} options={{ title: 'Nutritional Facts' }} />
            <Stack.Screen name="ChangePassword" component={ChangePassword} options={{ headerShown: false }} />
            <Stack.Screen name="BarCodeScan" component={BarCodeScan} />
            <Stack.Screen name="TermsAndService" component={TermsAndService} />
            <Stack.Screen name="About Us" component={AboutUs} />
            <Stack.Screen name="Favorites" component={Favorites} />
            <Stack.Screen name="Settings" component={Settings} options={{ title: 'Settings' }} />
            <Stack.Screen name="User Profile" component={UserProfile} options={{ title: 'User Profile' }} />
          </Stack.Navigator>
        </NavigationContainer>
      </ListProvider>
    </GlobalContext.Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

DBAdapter.js:

export const verifyUser = (username, password, callback) => {
    db.transaction((tx) => {
        try {
            tx.executeSql(
                "Select * from Users WHERE username = ?",,
                (_,{ rows }) => {
                    if (rows.length === 0) 
                    {
                        callback({ success: false, error: 'Invalid Username' }); 
                    } else {
                        const user = rows.item(0);
                        if(user.password === password) {
                            callback({ success: true, user });
                        } else {
                            callback({ success: false, error: 'Invalid Password' });
                        }
                    }
                },
                (_, e) => {
                    console.log(e)
                })
        } catch {
            console.log("Error verifying the user")
        }
    })
}

Console.log Output:
Object { "key": "User Profile-xZVM9w3YNMNTv3j0gnFVF", "name": "User Profile", "params": undefined, "path": undefined, }

I tried multiple different ways of nesting parameters to routes. I tried using props.route.params. I tried using global navigation method. I am expecting the value of username/password in Login.js to pass to User Profile.js, while navigating to BottomTabs when the user taps the login button.