How to change the Page in React.js

I’m learning React.js and I’m creating a demo.

I have created a Login page. Now I want to develop the functionality that if I’m using admin’s credentials then I should change the current page layout to listing of employees. And if I’m using the employee’s credentials then I should change page to show the details of that employee.

Currently it’s not able to print content after proper login.

App.js

import { useState } from 'react';

import './App.css';
import USER_DATA from './userData';
import AdminPage from './components/Admin';
import EmployeePage from './components/Employee';

function App() {
  let [userEmail, setEmail] = useState('[email protected]'),
    [userPassword, setPassword] = useState('password');

  function handleEmail(event) {
    setEmail(event.target.value);
  }

  function handlePassword(event) {
    setPassword(event.target.value);
  }

  function handleLogin(email, password) {
    for (let user of USER_DATA) {
      if (user.userEmail === email) {
        if (user.password === password) {
          if (user.isAdmin) return <AdminPage />;
          else return <EmployeePage />;
        } else {
          console.log('Password not matched ..... ');
        }
      } else {
        console.log('Email not matched ..... ');
      }
    }
  }

  return (
    <div className='App'>
      <header className='App-header'>
        <p className='P'>Welcome there!</p>
        <div
          id='input-div'
          style={{
            display: 'flex',
            flexDirection: 'column',
            margin: '20px',
            alignContent: 'left',
          }}
        >
          <label>Email</label>
          <input
            type='email'
            id='email'
            onChange={handleEmail}
            placeholder={userEmail}
            // value={userEmail}
            required
          />
          <label>Password</label>
          <input
            type='password'
            id='password'
            onChange={handlePassword}
            // value={userPassword}
            placeholder={userPassword}
            required
          />
        </div>

        <div style={{ display: 'flex', margin: '10px' }}>
          <button
            className='Button'
            onClick={() => handleLogin(userEmail, userPassword)}
          >
            Login
          </button>
          <button className='Button'>Registration</button>
        </div>
      </header>
    </div>
  );
}

export default App;

userData.js

const userData = [
  {
    userId: 1,
    userEmail: '[email protected]',
    password: 'password',
    isAdmin: true,
  },
];

export default userData;

Admin.jsx

export default function AdminPage() {
  return (
    <>
      <p>Admin Login</p>
    </>
  );
}

Thank for in advance.