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 = {
+  /**
+   * Name of the elemement. ex. email, password
+   */
+  name: string;
+  label: string;
+  error: boolean;
+  errorMessage: string;
+  /**
+   * react-hook-form control
+   */
+  control: Control<FieldValues> | undefined;
+  rules: Partial<unknown>;
+};
+
+export const InputField: FC<Props> = (props: Props) => {
+  const { name, label, error, errorMessage, control, rules } = props;
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ onChange, value }) => (
+        <TextField
+          variant="outlined"
+          margin="normal"
+          required
+          fullWidth
+          id={name}
+          label={label}
+          name={name}
+          onChange={onChange}
+          value={value}
+          autoComplete={name}
+          autoFocus
+          error={error}
+          helperText={error && errorMessage}
+        />
+      )}
+    />
+  );
+};