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

前提

"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

該当のソースコード

react

1import React, { useRef, createRef, useMemo, useEffect, useState } from "react"; 2import { useFormContext } from "react-hook-form"; 3 4export const RadioFiled = ()=>{ 5　//親コンポーネントからuseFormを引き継いでます 6 const { register } = useFormContext(); 7 const inputRefs = useRef([]); 8 9//radioボタンのvalueと文言のデータになります 10 const sales = { 11 0: "停止中", 12 1: "販売中", 13 }; 14 15//オブジェクトだと扱いづらいので配列に直してます 16 const itemArray = []; 17 Object.keys(sales).forEach(key => { 18 itemArray.push({ 19 key: key, 20 value: sales[key] 21 }); 22 }); 23 24//複数のuseRefを使用できるようにしています 25 itemArray.forEach((_, i) => { 26 inputRefs.current[i] = createRef(); 27 }); 28 29//buttonをクリックしたら対象のradioボタンをcheckするようにしています 30 const onClick = (i, key) => { 31 if(inputRefs.current[i].current){ 32 inputRefs.current[i].current.click(); 33 } 34 } 35 36 return( 37 <div> 38 <p>選択項目</p> 39 <div> 40 {itemArray.map((item, i)=>{ 41 return( 42 <div key={i}> 43 <button onClick={() => onClick(i, item.key)> 44 {item.value} 45 </button> 46 <input 47 { ...register("sales") } 48 ref={inputRefs.current[i]} 49 type="radio" 50 value={item.key} 51 /> 52 </div> 53 ) 54 })} 55 </div> 56 </div> 57 ) 58}```