How to make react-hook-form work?

Question

React

there is a component that returns a styled TextField from react-material ui

...
 return (
        <>
            <TextField
                name={name}
                label={label}
                type={type === 'password' ? showPassword ? 'text' : 'password' : type}
                variant="filled"
                onChange={onChange}
                InputProps={inputProps}
                InputLabelProps={{
                    classes: {
                        root: classes.vp_label,
                    }
                }}
                classes={{
                    root: classes.vp_root
                }}
                inputRef={register({ required: true })}
            />
        </>
    )

this component is imported into the form where, in fact, I'm trying to fasten the validation from the react hook form

import React, { useState, useContext }      from 'react';
import Field                                from '../../UI/TextField/Field';
import { useForm }                          from 'react-hook-form'

const LoginForm = () => {
    const classes = useStyles();
    const { register, handleSubmit, errors } = useForm();

    const [state, setState] = useState({
        email: '',
        password: '',
        rememberMe: false
    });

    const changeHandler = (event) => {
        setState({
            ...state,
            [event.target.name]: event.target.value
        })
    };

    const onSubmitHandler = (data) => {
        console.log(data)
        console.log(errors)
       };

    return (
        <form onSubmit={ handleSubmit(onSubmitHandler) }>
            <h3 className={classes.formHeading}>Авторизация</h3>
            <div className={classes.mb8}>
                <Field
                    type={'email'}
                    label={'Эл. почта'}
                    name={'email'}
                    onChange={changeHandler}
                    register={register}
                />
            </div>
          
            <Button
                variant="contained"
                className={classes.buttonEnter}
                disableElevation
                onClick={onSubmitHandler}
            >
                Войти
            </Button>
        </form>
    )
};

The problem is that the error object always comes empty and data returns some instance of the class.


What have I done wrong?

Answer 1

The dock has an example of how to integrate with ui libs https://react-hook-form.com/get-started#Integratin...