Password Entry System in React and Mantine

App.css

.containerMain {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80%;
}

.centered {
  border: 1px solid #8080803f;
  padding: 0em 1em 1em 1em;
  border-radius: 1%;
  width: 20vw;
}

.main {
  width: 100%;
  height: 100vh;
}

.navbar {
  padding: 1em 1em 1em;
}

App.tsx

import { useState } from 'react';
import './App.css';
import { MantineProvider, PasswordInput, TextInput, Button, Space, Center, ActionIcon } from '@mantine/core';
import { MdDarkMode, MdLightMode } from 'react-icons/md'

function App() {
  const CheckEmailPassword = () => {
    if (email === "") {
      setEmailError(true);
    } else {
      setEmailError(false);
    }
    if (password === "") {
      setPasswordError(true);
    } else {
      setPasswordError(false);
    }
  }
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [darkMode, setDarkMode] = useState(true);
  const [emailError, setEmailError] = useState(false);
  const [passwordError, setPasswordError] = useState(false);

  return (
    <div className="main" style={{backgroundColor: darkMode ? '#1A1B1E' : '#e8ebf5'}}>
      <MantineProvider theme={{ colorScheme: darkMode ? 'dark' : 'light' }}>
        <div className="navbar" style={{backgroundColor: darkMode ? '#21252B' : '#d5d7da'}}>
          <ActionIcon<'a'>
            component="a"
            onClick={() => setDarkMode(!darkMode)}
            size="xl">
            {darkMode ? <MdLightMode size="25px" /> : <MdDarkMode size="25px"/>}
          </ActionIcon>
        </div>
        <div className="containerMain">
          <div className="centered">
            <h1 style={{color: darkMode ? 'white' : 'black'}}>Sign In</h1>
            <TextInput 
            error={emailError && "Please enter a valid email address"} 
            label="Email" 
            placeholder="Email" 
            required value={email} 
            onChange={(event) => setEmail(event.currentTarget.value)} />
            <Space h="xl" />
            <PasswordInput
              error = {passwordError && "Please enter a valid password"}
              placeholder="Password"
              label="Password"
              required value={password} onChange={(event) => setPassword(event.currentTarget.value)}
            />
            <Space h="xl" />
            <Center >
              <Button<'a'>
                component="a"
                onClick={() => CheckEmailPassword()}
                color="cyan"
                radius="xs" >
                Sign In
              </Button>
            </Center>

          </div>
        </div>

      </MantineProvider>
    </div>

  );
  
}

export default App;