React-Native undefined browser tab titles? react-router-dom Navigate

We are getting an issue using react-native where when we navigate to another page using the react-router-dom, it sends you to the correct page, but the tab title displays undefined. Once you refresh the page, however, it displays the correct screen title. Here is an example of where we navigate to the /login page:

import { Navigate } from "react-router-dom";
import { getItem } from "../utils/localStorageUtil";
import WebMain from "./WebMain";
import { HomeStack } from "./WebMain";

const AuthContainer = () => {

  const token = getItem('token');

  return token ? <WebMain stack={HomeStack} /> : <Navigate to="/login" replace />
}

export default AuthContainer;

Here is what our routes look like:

import * as React from 'react';
import MobileMain from './navigation/MobileMain';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import ViewPage from './Components/ViewOnlyComponents/ViewPage';
import WebMain, { GalleryStack, LibraryStack, ProfileStack, LoginStack, RegisterStack, VerificationStack, CameraConnectionsStack } from './navigation/WebMain';
import { MenuProvider } from 'react-native-popup-menu';
import { NavigationContainer } from '@react-navigation/native';
import { DataProvider } from './Components/ContextProvider';
import AuthContainer from './navigation/AuthContainer';

const PageNotFound = () => (
  <div>
    <h1>Page Not Found</h1>
    <p>Oops! The page you're looking for does not exist.</p>
  </div>
);

const PathRouter = () => (
  <Router>
    <Routes>
      {/* Route with URL parameters */}
      <Route path="/view-photos/:parameter1/" element={<ViewPage />} />
      {/* Route for when "/view" parameter is not present */}
      <Route path="/" element={<AuthContainer />} />
      <Route path="/home" element={<Navigate to="/" />} />
      <Route path="/login" element={<WebMain stack={LoginStack} />} />
      <Route path="/register" element={<WebMain stack={RegisterStack} />} />
    </Routes>
  </Router>
);

Here’s what the LoginStack looks like:

export const LoginStack = () => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Login" component={LoginScreen} />
  </Stack.Navigator>
);

So the tab should display the name “Login”. When we redirect, or even copy links to other pages, it initially sets the tab title as undefined. Once you refresh, it puts the correct name there. Any insight as to why and how we can fix this?

Expected to redirect to a page using Navigate or useNavigate from the dom package, and have it display the tab name correctly. It initally doesn’t on the redirect and only displays undefined. After a refresh of the browser page, it displays the correct name