[React] react-hook-formでコンポーネントを分割したフォームでうまく登録できない

Question

開発環境

• react v16.14
• react-hook-form v6.15.7

実装内容

親コンポーネント、子コンポーネントという関係性で、react-hook-formを利用し、
以下のようなフォームを作成しています。
このままですた、コンポーネントが違うから？「onSubmit」の中のrecordを確認すると何もデータが入っていません。

// Parent.js（親コンポーネント）
import React, { useState } from 'react'
import { useForm } from 'react-hook-form'

import { Child } from './Child'

export const Parent = () => {
  const { register, errors, handleSubmit } = useForm()
  const [name, setName] = useState('')

  const handleChange = (e) => {
    setName(e.target.value)
  }

  const onSubmit = (record) => {
    console.log(record)
  }

  return (
    <form>
      <button onClick={handleSubmit(onSubmit)}>保存</button>
      <Child onChange={handleChange} name={'name'} value={name} register={register} />
    </form>
  )
}

// Child.js（子コンポーネント）
import React from 'react'

export const Child = (props) => {
  const { name, value, register, onChange } = props

  return <input type='text' name={name} onChange={onChange} value={value} ref={register} />

}

実現したいこと

今回のように、コンポーネントを分割したフォームでreact-hook-formを利用するにはどのように実装すれば良いでしょうか？

Comments

[hoshi-takanori]

react-hook-form はデフォルトでは非制御コンポーネントを対象にしてるってことで、input に value や onChange を指定する必要はない (Material-UI などの制御コンポーネントの場合は Controller と組み合わせて使う) のでは。
https://react-hook-form.com/jp/faqs#ReactHookFormFormikorReduxForm
https://react-hook-form.com/jp/api/#Controller