How to pass parameters to a screen that’s not in your stack in react native?

Currently, in order to go from the login page to the userHomeScreen, I check to make sure a user is logged in and onboarded. The routes page automatically goes to the userHomeScreen since that’s the initial route.

I want to display information pulled from an API onto the userHomeScreen upon arrival, but currently it only appears after a re-render. In order to fix this, I called the API on the login page (page before the userHomeScreen) and want to pass the object over to the login page via navigation parameters. How do I go from the login page to the userHomeScreen inside the App Stack. I’ve tried doing navigation.navigate("Home", {screen: "userHomeScreen", params: {user: user_nm}) but I get the "navigation was not handled my any navigator error" . Please help.

This is my auth stack.

const Stack = createNativeStackNavigator();

const AuthStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen
        name="Home"
        component={LandingPage}
        options={({ navigation }) => ({ navigation })}
      />
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={({ navigation }) => ({ navigation })}
      />
      <Stack.Screen
        name="Registration"
        component={RegistrationScreen}
        options={({ navigation }) => ({ navigation })}
      />
    </Stack.Navigator>
  );
};
export default AuthStack;

This is my AppStack

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const HomeStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="userHomeScreen"
      screenOptions={{ headerShown: false }}
    >
      <Stack.Screen name="userHomeScreen" component={UserHome} />
      <Stack.Screen name="viewRecipeScreen" component={ViewRecipe} />
      <Stack.Screen name="recipeDetailsScreen" component={RecipeDetails} />
      <Stack.Screen name="editProfileScreen" component={EditProfile} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="AllFriends" component={FriendsResultsScreen} />
    </Stack.Navigator>
  );
};

const AppStack = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarLabelStyle: styles.tabLabel,
        headerShown: false,
        tabBarIcon: ({ focused, size }) => {
          let iconName;
          if (route.name === "Home") {
            iconName = focused ? "home" : "home";
          } else if (route.name === "Add Recipe") {
            iconName = focused ? "plus" : "plus";
          } else if (route.name === "Find Friends") {
            iconName = focused ? "search1" : "search1";
          } else if (route.name === "Profile") {
            iconName = focused ? "profile" : "profile";
          } else if (route.name === "Feed") {
            iconName = focused ? "profile" : "profile";
          }

          // Use the iconName variable in the AntDesign component
          return <AntDesign name={iconName} size={size} color={"#8252ff"} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Add Recipe" component={AddRecipe} />
      <Tab.Screen name="Find Friends" component={OurQuery} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      {/* <Tab.Screen name="viewRecipeScreen" component={ViewRecipe} /> */}
    </Tab.Navigator>
  );
};

export default AppStack;

This is my routes page

const Routes = () => {
  const { user, isOnboarded, initializing } = useContext(AuthContext);

  if (initializing) return null;

  return (
    <NavigationContainer>
      {user ? (
        isOnboarded ? (
          <AppStack />
        ) : (
          <RegistrationStack />
        )
      ) : (
        <AuthStack />
      )}
    </NavigationContainer>
  );
};

export default Routes;