Move control to InputField to make component more reusable

src/components/AuthUser/SignInForm/InputField.tsx

 import React, { FC } from 'react';
 import { TextField } from '@material-ui/core';
+import { Control, Controller, FieldValues } from 'react-hook-form';
 
 type Props = {
   id: string;
   label: string;
   error: boolean;
   errorMessage: string;
-  value: string;
-  onChange: any;
+  control: Control<FieldValues> | undefined;
+  rules: Partial<unknown>;
 };
 
 export const InputField: FC<Props> = (props: Props) => {
-  const { id, label, error, errorMessage, onChange, value } = props;
+  const { id, label, error, errorMessage, control, rules } = props;
   return (
-    <TextField
-      variant="outlined"
-      margin="normal"
-      required
-      fullWidth
-      id={id}
-      label={label}
+    <Controller
       name={id}
-      onChange={onChange}
-      value={value}
-      autoComplete={id}
-      autoFocus
-      error={error}
-      helperText={error && errorMessage}
+      control={control}
+      rules={rules}
+      render={({ onChange, value }) => (
+        <TextField
+          variant="outlined"
+          margin="normal"
+          required
+          fullWidth
+          id={id}
+          label={label}
+          name={id}
+          onChange={onChange}
+          value={value}
+          autoComplete={id}
+          autoFocus
+          error={error}
+          helperText={error && errorMessage}
+        />
+      )}
     />
   );
 };

src/components/AuthUser/SignInForm/SignInForm.tsx

 import React, { FC } from 'react';
 import axios from 'axios';
-import { useForm, Controller, appendErrors } from 'react-hook-form';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import { useIntl } from 'react-intl';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import { TextField, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import { DevTool } from '@hookform/devtools';
 import { InputField } from './InputField';
 
@@ -36,21 +36,20 @@ export const SignInForm: FC = () => {
     password: '',
   };
 
-  const { control, register, errors, handleSubmit } = useForm<FormData>({
+  const { control, errors, handleSubmit } = useForm<FormData>({
     defaultValues,
   });
 
-  const onSubmit: any = (values: FormData) => {
+  const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
     axios
       .post('/api/web/login', {
         values,
-        token: sessionStorage.getItem('CSRF_TOKEN'),
       })
       .then((response) => {
-        console.log(response);
+        // Handle server reponse
       })
       .catch((error) => {
-        console.log(error);
+        // Handle error
       });
   };
   const intl = useIntl();
@@ -62,48 +61,20 @@ export const SignInForm: FC = () => {
         onSubmit={handleSubmit(onSubmit)}
         data-testid="Form"
       >
-        <Controller
-          name="email"
+        <InputField
+          id="email"
           control={control}
-          defaultValues
           rules={{
-            validate: (value) =>
+            validate: (value: string) =>
               /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
             required: {
               value: true,
               message: intl.formatMessage({ id: 'email' }),
             },
           }}
-          render={({ onChange, value }) => (
-            <InputField
-              id="email"
-              value={value}
-              onChange={onChange}
-              label={intl.formatMessage({ id: 'email' })}
-              error={!!errors.email}
-              errorMessage={intl.formatMessage({ id: 'error' })}
-            />
-          )}
-        />
-
-        <Controller
-          name="password"
-          control={control}
-          rules={{
-            minLength: 8,
-            maxLength: 60,
-            required: { value: true, message: 'You must enter your name' },
-          }}
-          render={({ onChange, value }) => (
-            <InputField
-              id="password"
-              value={value}
-              onChange={onChange}
-              label="Password"
-              error={!!errors.password}
-              errorMessage="Incorrect entry."
-            />
-          )}
+          label={intl.formatMessage({ id: 'email' })}
+          error={!!errors.email}
+          errorMessage={intl.formatMessage({ id: 'error' })}
         />
 
         <Button