Move TextInput to InputField

src/components/AuthUser/SignInForm/InputField.tsx

+import React, { FC } from 'react';
+import { TextField } from '@material-ui/core';
+
+type Props = {
+  id: string;
+  label: string;
+  error: boolean;
+  errorMessage: string;
+};
+
+export const InputField: FC<Props> = (props: Props) => {
+  const { id, label, error, errorMessage } = props;
+  return (
+    <TextField
+      variant="outlined"
+      margin="normal"
+      required
+      fullWidth
+      id={id}
+      label={label}
+      name={id}
+      autoComplete={id}
+      autoFocus
+      error={error}
+      helperText={error && errorMessage}
+    />
+  );
+};

src/components/AuthUser/SignInForm/SignInForm.tsx

 import React, { FC } from 'react';
-import { useForm, Controller } from 'react-hook-form';
+import { useForm, Controller, appendErrors } from 'react-hook-form';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { TextField, Button } from '@material-ui/core';
 import { DevTool } from '@hookform/devtools';
+import { InputField } from './InputField';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -20,6 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
   }),
 );
+
 // TODO: real time form validation
 export const SignInForm: FC = () => {
   interface FormData {
@@ -57,18 +59,11 @@ export const SignInForm: FC = () => {
             required: { value: true, message: 'You must enter your email' },
           }}
           render={() => (
-            <TextField
-              variant="outlined"
-              margin="normal"
-              required
-              fullWidth
+            <InputField
               id="email"
               label="Email Address"
-              name="email"
-              autoComplete="email"
-              autoFocus
               error={Boolean(errors.email)}
-              helperText={errors.email && 'Incorrect entry.'}
+              errorMessage="Incorrect entry."
             />
           )}
         />
@@ -83,19 +78,11 @@ export const SignInForm: FC = () => {
             required: { value: true, message: 'You must enter your name' },
           }}
           render={() => (
-            <TextField
-              variant="outlined"
-              margin="normal"
-              required
-              fullWidth
-              name="password"
-              label="Password"
-              type="password"
+            <InputField
               id="password"
-              autoComplete="password"
-              autoFocus
+              label="Password"
               error={Boolean(errors.password)}
-              helperText={errors.password && 'Incorrect entry.'}
+              errorMessage="Incorrect entry."
             />
           )}
         />