Having a Problem with Rendering MockMail Component After Correct Log In Credentials Entered on React Form

I am currently experiencing a problem whereby when I type the correct username and password credentials into the React Login form (which is initialized as user and pass) the MockMail component is not being rendered.

I have done console logs in the handleLogin function and the expected values are correct: Attempting login with: user pass
Logged in as: user – yet the mockmail still doesn’t render.
However the console logs in the MockmailContainer do not log, meaning there is a problem there?

I am wondering if it is my Router component not configured correctly?

Any help is greatly appreciated, thanks in advance.

import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';
import { StaticElementContainer } from "./containers/StaticElementContainer";
import { LoginFormContainer } from "./containers/LoginFormContainer";
import { MockMailContainer } from "./containers/MockMailContainer";
import { CreateAccountContainer } from "./containers/CreateAccountContainer";

function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [users, setUsers] = useState([
    { id: 1, username: 'user', password: 'pass', email: '', phone: '' }
  ]);
  const [currentLoggedInUser, setCurrentLoggedInUser] = useState(null);

  const handleLogin = (username, password) => {
    console.log("Attempting login with:", username, password);
    const correctLoginCredentials = users.find(
      (user) => user.username === username && user.password === password
    );

    if (correctLoginCredentials) {
      setLoggedIn(true);
      setCurrentLoggedInUser(correctLoginCredentials.username);
      console.log("Logged in as:", correctLoginCredentials.username);
    } else {
      console.log("Invalid credentials");
    }
  };

  return (
    <Router>
      <Routes>
        <Route path="/" element={
          <StaticElementContainer>
            <LoginFormContainer 
              users={users}
              handleLogin={handleLogin}
            />
          </StaticElementContainer>
        } />
        <Route 
          path="/mockmail" 
          element={<MockMailContainer   
                    loggedIn={loggedIn}
                    currentLoggedInUser={currentLoggedInUser}
                   />} 
        />
        <Route path="/create-account" element={
          <StaticElementContainer>
            <CreateAccountContainer />
          </StaticElementContainer>
        } />
      </Routes>
    </Router>
  );
}

export default App;

import React, { useState } from 'react';
import { LoginForm } from '../components/LoginForm';

export const LoginFormContainer = ({ users, handleLogin }) => {

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [usernamePlaceholder, setUsernamePlaceholder] = useState("Username...");
    const [passwordPlaceholder, setPasswordPlaceholder] = useState("Password...");

    const handleSubmit = (e) => {
        e.preventDefault();
        handleLogin(username, password);
      };

    const handleUsernameClick = () => {
        setUsernamePlaceholder("");
    };

    const handlePasswordClick = () => {
        setPasswordPlaceholder("");
    };

    const handleUsernameBlur = () => {
        if (username === "") {
            setUsernamePlaceholder("Username...");
        }
    };

    const handlePasswordBlur = () => {
        if (password === "") {
            setPasswordPlaceholder("Password...");
        }
    };

    const handleCreateAccountClick = () => {
        // navigate('/create-account');
    };

    return(
        <>
            <LoginForm
                username={username}
                setUsername={setUsername}
                password={password}
                setPassword={setPassword}
                handleSubmit={handleSubmit}
                handlePasswordClick={handlePasswordClick}
                handleUsernameClick={handleUsernameClick}
                usernamePlaceholder={usernamePlaceholder}
                passwordPlaceholder={passwordPlaceholder}
                handleUsernameBlur={handleUsernameBlur}
                handlePasswordBlur={handlePasswordBlur}
                handleCreateAccountClick={handleCreateAccountClick}
            />
        </>
    );
};

import React from "react";

export const LoginForm = ({ 
    username,
    setUsername,
    password,
    setPassword,
    handleSubmit,
    handlePasswordClick, 
    handleUsernameClick,
    usernamePlaceholder,
    passwordPlaceholder,
    handleUsernameBlur,
    handlePasswordBlur,
    handleCreateAccountClick
}) => {
    return (
        <form onSubmit={handleSubmit}>

            <h1 class="thin space">Sign In</h1>

            <h2 class='thin gap'>to continue to Gmail</h2>

            <label class="space line-height">
                <input 
                    class="input"
                    type='text' 
                    value={username} 
                    placeholder={usernamePlaceholder}
                    onFocus={handleUsernameClick}
                    onBlur={handleUsernameBlur}
                    onChange={(e) => setUsername(e.target.value)}
                />
            </label>
     
            <label class="space line-height">
                <input 
                    class="input disable-eye-icon"
                    type='password'
                    value={password}
                    placeholder={passwordPlaceholder}
                    onFocus={handlePasswordClick}
                    onBlur={handlePasswordBlur}
                    onChange={(e) => setPassword(e.target.value)}
                />
            </label>
            
            <button class="space blue-button" type='submit'>
                Login   
            </button>


            <p class="space hyper-link">Forgot Username?</p>
            <p class="space hyper-link">Forgot Password?</p>
            <button class="last grey-button" onClick={handleCreateAccountClick}>Create account</button>
        </form>
  );
}

import React from 'react';

export const MockMail = ({ loggedIn, currentLoggedInUser }) => {

    return (
        <>
            {loggedIn && currentLoggedInUser && (
                <h1>Welcome, {currentLoggedInUser}!</h1>
            )}
        </>
    )
}

import { MockMail } from '../components/MockMail';


export const MockMailContainer = ({ loggedIn, currentLoggedInUser }) => {
    console.log("loggedIn:", loggedIn);
    console.log("currentLoggedInUser:", currentLoggedInUser);
    

    return (
        <MockMail 
        loggedIn={loggedIn}
        currentLoggedInUser={currentLoggedInUser}
        />
    )
}

Jake