SignInForm.tsx

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';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      '& > *': {
        margin: theme.spacing(0),
      },
    },
    form: {
      width: '100%', // Fix IE 11 issue.
      marginTop: theme.spacing(1),
    },
    submit: {
      margin: theme.spacing(3, 0, 2),
    },
  }),
);

export const SignInForm: FC = () => {
  type FormData = {
    email: string;
    password: string;
  };

  const defaultValues: FormData = {
    email: '',
    password: '',
  };

  const { register, errors, handleSubmit, getValues } = useForm({
    defaultValues,
  });

  const onSubmit = handleSubmit((values: FormData) => {
    // Send data
  });

  const classes = useStyles();

  return (
    <form className={classes.form} onSubmit={onSubmit} data-testid="Form">
      <TextField
        variant="outlined"
        margin="normal"
        required
        fullWidth
        id="email"
        label="Email Address"
        name="email"
        autoComplete="email"
        autoFocus
        inputRef={register({
          required: 'Required',
          validate: {
            emailEqual: (value) => value === getValues().email || 'Error',
          },
        })}
      />
      {errors.email && errors.email.message}
      <TextField
        variant="outlined"
        margin="normal"
        required
        fullWidth
        name="password"
        label="Password"
        type="password"
        id="password"
        autoComplete="current-password"
        inputRef={register({
          required: 'Required',
          min: 8,
          max: 60,
        })}
      />

      <Button
        type="submit"
        fullWidth
        variant="contained"
        color="primary"
        data-testid="Submit"
        className={classes.submit}
      >
        Sign In
      </Button>
    </form>
  );
};