react-hook-form useForm 値を受け取れない

Question

◆バージョン
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.12.1",

◆していること
・React Hook Formを使用してアカウント作成画面を作成しております。

・構造としてはわかりずらいかもしれませんが下記のように
アカウント作成画面のAccountCreate.tsxファイルと
入力(input)と登録(submit)のコンポーネントとしてformComponent配下に
formItems.tsxがあります。

my-app	src配下	formComponent配下
src	AccountCreate.tsx
	formComponent
	formItems.tsx

・見た目かこんな感じです。

・コードは下記になります。
AccountCreate.tsx(見た目に関するコードは省略しています)

import React, {ReactElement, useEffect, useState} from "react";
import { FormProvider, useForm } from 'react-hook-form';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import { FormInputComponent, FormSubmitComponent } from './formComponent/formItems';

type formInput = {
  name: string;
  searchId: string;
}

function AccountCreate(): ReactElement {

  const methods = useForm<formInput>({
    defaultValues: {
      name: '',
      searchId: '',
    },
  });

  const [input, setInput] = useState<formInput>({
    name: '',
    searchId: '',
  });

  const { handleSubmit, watch } = methods;

  useEffect(() => {
    setInput({
      name: watch('name'),
      searchId: watch('searchId'),
    });
  }, [watch('name'), watch('searchId')]);

  return(
    <section className={classes.section}>
      <Box border={1} borderRadius="borderRadius" className={classes.box}>
        <h1 className={classes.setFont}>アカウント作成</h1>
        <FormProvider {...methods}>
          <form className={classes.root} noValidate autoComplete="off" onSubmit={handleSubmit((data) => console.log(data))}>
            <div className={classes.setMargin}>
              <FormInputComponent labelText="名前" name="name" type="text" id={0} setClassName="js-account-icon" />
              <FormInputComponent labelText="ID" name="searchId" type="text" id={1} setClassName="js-search-icon" />
              <FormSubmitComponent submitText="登録"/>
            </div>
          </form>
        </FormProvider>
      </Box>
    </section>
  );
};

export default AccountCreate;

formItems.tsx(見た目に関するコードは省略しています)

import React, { VFC } from "react";
import { useFormContext } from 'react-hook-form';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import AccountCircle from '@material-ui/icons/AccountCircle';
import SearchIcon from '@material-ui/icons/Search';
import Button from '@material-ui/core/Button';
import { withStyles, makeStyles, createStyles, Theme } from '@material-ui/core/styles';
// import { useContext } from "react";

const CssTextField = withStyles({
。。。
})(TextField);

type iProps = {
    labelText: string;
    name: string;
    type: 'text' | 'password' | 'number' | 'submit';
    id: number;
    setClassName: string;
};

type sProps = {
    submitText: string;
};

export const FormInputComponent: VFC<iProps> = ({
    labelText,
    name,
    type,
    id,
    setClassName,
}) => {
    const { register } = useFormContext();

    const displayIcon = ()=>{
        if(id === 0){
            return <AccountCircle className={setClassName} />;
        }else if(id === 1){
            return <SearchIcon className={setClassName} />
        }
    };

    return(
            <div className={classes.inputWrap}>
                <Grid container spacing={1} className={classes.inputContainer}>
                    <Grid item>
                        {displayIcon()}
                    </Grid>
                    <Grid item>
                        <CssTextField required id="input-with-icon-grid" {...register(name, { required: true })} label={labelText} />
                    </Grid>
                </Grid>
            </div>
    );
};

export const FormSubmitComponent: VFC<sProps> = (({
    submitText,
}) => {

    return(
        <div className={classes.buttonContainer}>
            <Button className={classes.button} type='submit' variant="outlined">{submitText}</Button>
        </div>
    );
});

◆現在の状況
名前とIDを入力して登録ボタンをクリックしてもConsoleに入力情報が表示されないのと
watchでの値の監視ができておりません。
また下記の注意内容がConsoleに表示されております。

@typescript-eslint/no-unused-vars
  Line 76:6:   React Hook useEffect has a missing dependency: 'watch'. Either include it or remove the dependency array                                  react-hooks/exhaustive-deps
  Line 76:7:   React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
  Line 76:22:  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
  Line 76:41:  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps                                                                                     @typescript-eslint/no-unused-vars

◆解決したいこと
値を入力して登録ボタンをクリックしたらConsoleに入力情報が表示されたいのと
watchでの値の監視をできるようにしたいです。
自分が調べてみた限りコンポーネントをimportしネストしてuseFormを使用する時は
FormProviderとuseFormContextを使用することでコンポーネント先でもregister等を
使用できる認識でいます。
試しにimportせずにAccountCreate.tsxに直接input要素を記載し
値を入力して登録ボタンをクリックしたらConsoleに入力情報が表示され
watchでの値の監視もできていました。
なのでuseFormContextの書き方がおかしいのかと思っていますが調べてみても直し方が分かりません。
もし分かる方がいらっしゃればご教示頂きたいです。お願い致します。

Answer 1

解決したので原因を記載しておきます。
値が取得できない原因は下記のコードでした。

<CssTextField required id="input-with-icon-grid" {...register(name, { required: true })} label={labelText} />

CssTextFieldはTextFieldコンポーネントにcssを適用させたものですが、自分はTextField=input要素という誤認識をしていました。実際はTextField=div要素であり、そのdiv要素の中にinput要素があるコンポーネントでした。
なのでregisterをCssTextFieldに指定しても値を受け取れていませんでした。(input要素にregisterを指定しないといけないため)
下記のようにinputPropsにregisterを設定することでinput要素にregisterが適用され値を受け取ることができました。

<CssTextField required id="input-with-icon-grid" inputProps={{...register(name, { required: true })}} label={labelText} />

もし今後同じようにMaterial-UIとreact-hook-formを使用する場合は参考にして頂けると嬉しいです。