reactでcomponentのinputBoxをformに渡す方法

Question

import {useForm} from 'react-hook-form';
import InputBox from "./InputBox"

const Form = () => {
    const { register,handleSubmit} = useForm();

    const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)} className='search_div'>
        <InputBox id='search_word' {...register("search")}/>
        <div className='submit_area'>
            <button type="submit">検索</button>
        </div>
    </form>
  )
}

export default Form

このように書いているのですが、consoleを確認してもsearch:undefinedのように出てきます。
プログラムが煩雑になるのでinputBoxを別ファイルで書いて渡すようにしているのですが、そうするとregister関数が使えなくなるのでしょうか？

Answer 1

react-hook-formのことは知りません、当てずっぽう回答です。

コンポーネントじゃないエレメントに渡して使うってことは、refで要素を捕まえてゴニョゴニョしてるか、onInputやonChangeのイベントハンドラーを渡してるのかどっちかだろうと思います。

register("search")の戻り値をconsole.logしてみて、onInputとかonChangeとかのイベントハンドラーがいるようならそれをInputBoxコンポーネントの中の適切なinput要素に渡すようにするとかする。
refがいるようであればInputBoxはRefのフォワーディングをする必要があるでしょう。