Working email validation and hiding controller logic to InputField

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}
+        />
+      )}
     />
   );
 };