Как я могу проверить поле ввода в реакции, используя регулярное выражение через хуки

Я пытаюсь проверить ввод с помощью хуков, но сталкиваюсь с проблемой, поскольку хочу, чтобы, если пользователи оставляют поле электронной почты пустым и переходят к паролю, я хочу показать сообщение о том, что электронное письмо не может быть пустым, также хочу проверить с помощью регулярного выражения, что адрес электронной почты действительный или нет, если теперь отображается недействительный адрес электронной почты, но я не могу увидеть сообщение об ошибке электронной почты в ответе. Любая помощь будет оценена.

Я новичок в реагировании на хуки.

export default function SignInForm() {
    const [email, setEmail] = useState(null);
    const [password, setlPassword] = useState(null);
    const [emailError, setEmailError] = useState(null);

    const emailValidation = (e) => {
         setEmail(e.target.value)
        if(!email){
            setEmailError('Enter a Email Address')
        }
    }
    console.log(emailError,"emailerror")
    const { t } = useTranslation();
    return (
        <Form fontColor={(props) => props.theme.colors.grey.base}>
            <label>{t('E-mail')}</label>
            <Input
                id={'email'}
                type={'email'}
                onChange={emailValidation}
            />
            <Status>{emailError}</Status>
            <label>{t('Password')}</label>
            <Input
                id={'password'}
                type={'password'}
                onChange={(e) => setlPassword(e.target.value)}
            />
            <Column>
                <ForgetText>{t('Forgotten')}</ForgetText>
            </Column>
            <Button themeBlue width={'336px'} onClick={() => onSubmit()}>
                {t('Sign In')}
            </Button>
</Forms>