Reactjs Проблема проверки формы машинописного текста

Question

Я новичок, и я пытаюсь построить проверку контактной формы.

import React, {useEffect, useState} from "react";
import {useStep} from "react-hooks-helper";


const Contact: React.FC = (callback, validate) => {
    const [contact, setContact] = useState({
        name: "",
        email: "",
        title: "",
        content: ""
    });
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const {index, navigation: {previous, next},} = useStep({steps: 4});

    function handleChange(e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) {
        const {name, value} = e.target
        setContact({...contact, [name]: value})
    }

    const handleSubmit = (e:React.ChangeEvent<HTMLFormElement>) => {
        e.preventDefault();
        setErrors(validate(contact));
        setIsSubmitting(true);
    };

    useEffect(() => {
        if (Object.keys(errors).length === 0 && isSubmitting) {
            callback();
        }
    }, [errors]);

    let errors = {};
    if (!contact.email) {
    } else if (!/\S+@\S+\.\S+/.test(contact.email)) {
        errors.email = "Email address is invalid";
    }



    return (

        <div className="contact">
            <div className="contact-inner">
                <form onSubmit={handleSubmit}>
                    {index === 0 && <label>
                        <input onChange={handleChange} value={contact.name} type="text" name="name"
                               placeholder="Please enter your name"/>
                        {errors.email && <p className="error">{errors.email}</p>}
                    </label>}
                    {index === 1 && <label htmlFor="email">
                        <input onChange={handleChange} value={contact.email} type="email" name="email"
                               placeholder="Please enter your email"/>
                    </label>}
                    {index === 2 && <label>
                        <input onChange={handleChange} value={contact.title} type="text" name="title"
                               placeholder="Please enter the title"/>
                    </label>}
                    {index === 3 && <label>
                        <textarea onChange={handleChange} value={contact.content} className="content" name="content"
                                  placeholder="Please enter your message"/>
                    </label>}
                </form>
                <div className="buttons">
                    {index === 0 ? <button onClick={previous} disabled>Previous</button> :
                        <button onClick={previous}>Previous</button>}
                    {index === 3 ? <button>Submit</button> : <button onClick={next}>Next</button>}

                </div>
            </div>
        </div>
    )
}

export default Contact

на callback() я получаю ошибку: This expression is not callable. Type '{ children?: ReactNode; }' has no call signatures.

на [errors] i get error: React Hook useEffect не имеет зависимостей: «обратный вызов» и «isSubmitting». Либо включите их, либо удалите массив зависимостей. Если «обратный вызов» меняется слишком часто, найдите родительский компонент, который его определяет, и оберните это определение в useCallback. (Реагировать на крючки / исчерпывающе-deps)

в let errors, который я получаю: Невозможно переопределить область видимости блока переменная 'errors'.

и для errors.email я получаю: Свойство 'email' не существует для типа '{}'.

, пожалуйста, помогите.