react-hook-form valueがundefinedになってしまう

Question

前提

"react": "^18.2.0",
"react-hook-form": "^7.37.0",

実現したいこと

react-hook-formを使用しformを作成したのですが
handleSubmitにて入力した値をconsole.logで出力すると
valueがundefinedになってしまいます。

undefinedになってしまうのはradioボタンになります。

buttonとradioボタンを設置しており、UI上はradioボタンは非表示にして
buttonのみ表示されるようにしてあります。
仕組みとしてはbuttonをクリックしたら紐づくradioボタンがcheckされるように
useRefを使用しDOM操作をしています。

undefinedにならず選択したvalueが出力されるようにしたいです。

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

どこが問題かは特定できているのですが対応の仕方が分からず...。
radioボタンにreact-hook-formのregisterとは別にrefにuseRefを渡しており
それが原因でrefが上書きされundefinedになっていると思われます。

//handleSubmitにてformのdataをconsole.logで出力した結果
//salesはradioボタンのnameです

{
    "sales": undefined,
}

UI

該当のソースコード

import React, { useRef, createRef, useMemo, useEffect, useState } from "react";
import { useFormContext } from "react-hook-form";

export const RadioFiled = ()=>{
　//親コンポーネントからuseFormを引き継いでます
    const { register } = useFormContext();
    const inputRefs = useRef([]);

//radioボタンのvalueと文言のデータになります
    const sales = {
        0: "停止中",
        1: "販売中",
    };

//オブジェクトだと扱いづらいので配列に直してます
    const itemArray = [];
    Object.keys(sales).forEach(key => {
        itemArray.push({
            key: key,
            value: sales[key]
        });
    });

//複数のuseRefを使用できるようにしています
    itemArray.forEach((_, i) => {
        inputRefs.current[i] = createRef();
    });

//buttonをクリックしたら対象のradioボタンをcheckするようにしています
    const onClick = (i, key) => {
        if(inputRefs.current[i].current){
            inputRefs.current[i].current.click();
        }
    }

    return(
        <div>
            <p>選択項目</p>
            <div>
                {itemArray.map((item, i)=>{
                    return(
                        <div key={i}>
                            <button onClick={() => onClick(i, item.key)>
                                {item.value}
                            </button>
                            <input
                                { ...register("sales") }
                                ref={inputRefs.current[i]}
                                type="radio"
                                value={item.key}
                            />
                        </div>
                    )
                })}
            </div>
        </div>
    )
}```

Answer 1

ドキュメントを読んでいたら解決できたので解決策を記載しておきます。
https://react-hook-form.com/faqs/

registerの中身をrefとそれ以外に分けることで対応できました。

const { ref, ...rest } = register('sales');

<input
 ref={(e) => {
  inputRefs.current[i].current = e;
  ref(e);
 }}
 { ...rest }
 type="radio"
 value={item.key}
/>