Hook form for form validation

src/components/AuthUser/SignInForm/SignInForm.tsx

-import React, { useState } from 'react';
+import React, { FC } from 'react';
+import { useForm } from 'react-hook-form';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
-import { isEmailValid } from './emailValidator';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -21,30 +22,29 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export const SignInForm: React.FC = () => {
-  interface formData {
+export const SignInForm: FC = () => {
+  type FormData = {
     email: string;
     password: string;
-    errors: Array<string>;
-  }
+  };
 
-  const defaultValues: formData = {
+  const defaultValues: FormData = {
     email: '',
     password: '',
-    errors: [],
   };
-  const [formValues, setFormValues] = useState<formData>(defaultValues);
 
-  const handleSubmit = (event: React.FormEvent): void => {
-    event.preventDefault();
-    const errors: Array<string> = [];
-    if (!isEmailValid(formValues.email)) errors.push('email');
-  };
+  const { register, errors, handleSubmit, getValues } = useForm({
+    defaultValues,
+  });
+
+  const onSubmit = handleSubmit((values: FormData) => {
+    // Send data
+  });
 
   const classes = useStyles();
 
   return (
-    <form className={classes.form} onSubmit={handleSubmit} data-testid="Form">
+    <form className={classes.form} onSubmit={onSubmit} data-testid="Form">
       <TextField
         variant="outlined"
         margin="normal"
@@ -55,10 +55,14 @@ export const SignInForm: React.FC = () => {
         name="email"
         autoComplete="email"
         autoFocus
-        onChange={(event) =>
-          setFormValues({ ...formValues, email: String(event.target.value) })
-        }
+        inputRef={register({
+          required: 'Required',
+          validate: {
+            emailEqual: (value) => value === getValues().email || 'Error',
+          },
+        })}
       />
+      {errors.email && errors.email.message}
       <TextField
         variant="outlined"
         margin="normal"
@@ -69,10 +73,13 @@ export const SignInForm: React.FC = () => {
         type="password"
         id="password"
         autoComplete="current-password"
-        onChange={(event) =>
-          setFormValues({ ...formValues, password: String(event.target.value) })
-        }
+        inputRef={register({
+          required: 'Required',
+          min: 8,
+          max: 60,
+        })}
       />
+
       <Button
         type="submit"
         fullWidth