Working email validation and hiding controller logic to InputField

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,36 @@ export const SignInForm: FC = () => {
         onSubmit={handleSubmit(onSubmit)}
         data-testid="Form"
       >
-        <Controller
+        <InputField
           name="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' })}
-            />
-          )}
+          label={intl.formatMessage({ id: 'email' })}
+          error={!!errors.email}
+          errorMessage={intl.formatMessage({ id: 'email-error' })}
         />
 
-        <Controller
+        <InputField
           name="password"
           control={control}
           rules={{
             minLength: 8,
             maxLength: 60,
-            required: { value: true, message: 'You must enter your name' },
+            required: {
+              value: true,
+              message: intl.formatMessage({ id: 'password' }),
+            },
           }}
-          render={({ onChange, value }) => (
-            <InputField
-              id="password"
-              value={value}
-              onChange={onChange}
-              label="Password"
-              error={!!errors.password}
-              errorMessage="Incorrect entry."
-            />
-          )}
+          label={intl.formatMessage({ id: 'password' })}
+          error={!!errors.password}
+          errorMessage={intl.formatMessage({ id: 'password-error' })}
         />
 
         <Button