react-hook-form バリデーションを行えない React

前提・実現したいこと

入力されたメールアドレスをバリデーションしてエラーを出す。
メールを送信ボタンを押し、メールアドレスが無効なフォーマットの場合、
入力フィールドの下の<span>でエラーメッセージを表示させたいです。

material-uiを使用しているので、Controllerで、ラッピングしてます

発生している問題・エラーメッセージ

エラーが発生しない。バリデーションされない。
送信後errorsオブジェクトには,エラーがうまく入ってきてません

該当のソースコード

typescript
1//TextFieldのコンポーネント
2
3import React from "react";
4import TextField from "@material-ui/core/TextField";
5import { createStyles, makeStyles } from "@material-ui/styles";
6import { Controller, useForm } from "react-hook-form";
7
8type Props = {
9  Name: string;
10  label: string;
11  fullWidth: boolean;
12  multiline: boolean;
13  onChange: () => void;
14  placeholder: string;
15  required: boolean;
16  rows: number;
17  type: string;
18};
19
20const TextEmailInput = ({ Name, label, fullWidth, multiline, onChange, placeholder, required, rows, type }: Props) => {
21  const { control, errors } = useForm({
22    mode: "onSubmit",
23    reValidateMode: "onBlur",
24  });
25
26  return (
27    <Controller
28      name={Name}
29      control={control}
30      defaultValue=""
31      rules={{
32        pattern: {
33          value: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/,
34          message: "無効なメールアドレスです。",
35        },
36      }}
37      render={() => (
38        <>
39          <TextField
40            InputLabelProps={{ shrink: true }}
41            label={label}
42            fullWidth={fullWidth}
43            multiline={multiline}
44            onChange={onChange}
45            placeholder={placeholder}
46            required={required}
47            rows={rows}
48            type={type}
49            variant="standard"
50          />
51          {errors[Name] && <span>テスト</span>}
52        </>
53      )}
54    />
55  );
56};
57
58export default TextEmailInput;
59
60
61//パスワードリセットのメールアドレスを送るページ
62
63import { createStyles, makeStyles } from "@material-ui/styles";
64import Head from "next/head";
65import React, { FC, FormEvent } from "react";
66import TwitterIcon from "@material-ui/icons/Twitter";
67import GitHubIcon from "@material-ui/icons/GitHub";
68import Link from "next/link";
69import { useForm } from "react-hook-form";
70import { PrimaryButton, SecondaryButton, TextEmailInput, TextInput } from "../src/components/UIkit";
71
72const useStyles = makeStyles(
73  createStyles({
74    root: {
75      position: "relative",
76      backgroundImage: "url(img/books-1456513080510-7bf3a84b82f8.jpeg)",
77      backgroundPosition: "center",
78      height: "100vh",
79    },
80    card: {
81      boxShadow: "0px 5px 5px 1px rgba(0, 0, 0, .2)",
82      position: "absolute",
83      top: "50%",
84      left: "50%",
85      transform: "translate(-50%, -50%)",
86      backgroundColor: "rgba(255, 255, 255, 0.7)",
87    },
88    form: {
89      margin: "0 auto",
90      maxWidth: 400,
91    },
92    textButton: {
93      textDecoration: "none",
94      color: "#444",
95      "&:hover": {
96        textDecoration: "underline",
97        cursor: "pointer",
98      },
99    },
100  })
101);
102
103const Login: FC = () => {
104  const classes = useStyles();
105  const { handleSubmit, errors } = useForm({
106    mode: "onSubmit",
107    reValidateMode: "onBlur",
108  });
109
110  const onSubmit = (data) => {
111    console.log(data + "データ");
112  };
113
114  return (
115    <>
116      <Head>
117        <title>STUDIOUS パスワードリセット</title>
118      </Head>
119      <div className={classes.root}>
120        <section className={`c-section-container ${classes.card}`}>
121          <div className="module-spacer--medium" />
122          <img
123            src="/studious-logo.jpg"
124            alt="/studious-logo"
125            className="u-logo-img--general"
126            width="40px"
127            height="40px"
128          />
129          <h1 className="u-text-headline">STUDIOUS</h1>
130          <h2 className="u-text-sub-headline">パスワードのリセット</h2>
131          <div className="module-spacer--medium" />
132          <form
133            className={classes.form}
134            onSubmit={(e: FormEvent<HTMLFormElement>) => {
135              e.preventDefault();
136              handleSubmit(onSubmit);
137            }}>
138            <div className="module-spacer--very-small" />
139            <TextEmailInput
140              Name="resetEmail"
141              label="email"
142              fullWidth={true}
143              multiline={false}
144              onChange={() => {}}
145              placeholder="Email"
146              required={true}
147              rows={1}
148              type="email"
149            />
150            <div className="module-spacer--medium" />
151            <div className="p-grid-columns">
152              <PrimaryButton submit={true} color="primary" disabled={false}>
153                メールを送信
154              </PrimaryButton>
155            </div>
156          </form>
157          <div className="module-spacer--small" />
158          <Link href="/login">
159            <a className={classes.textButton}>ログインはこちら</a>
160          </Link>
161
162          <div className="module-spacer--very-small" />
163          <Link href="/register">
164            <a className={classes.textButton}>新規登録はこちら</a>
165          </Link>
166          <div className="module-spacer--very-small" />
167        </section>
168      </div>
169    </>
170  );
171};
172
173export default Login;
174