[react-hook-form] ラジオボタンのフォームから受け取るdataの値がUndefinedになってしまう

react-hook-formを使用してラジオボタンのインプットフォームを作成しています。
ラジオボタンの○ぽちを見えなくして、アイコンの画像をボタン代わりに使用したいのですが、以下の問題があり実装できていません。

１. CSSでdisplay:noneとすると、データの値がundefinedになってしまいます。このdisplay:noneの設定なしだと問題なくvalueが送信できます。
2. 同じく、アイコンをクリックすると（checked）ボーダーがアイコン周りに付くようにCSS設定しているのですが、display:noneのスタイルありでは機能せず、display:noneスタイルなしでは問題なく機能します。

お知恵を貸していただけますと幸いです。

実現したいこと

• ラジオボタンのまるポチを非表示にし、かつフォームが機能（undefinedでないdata valueを送信する、checkできる）するようにする

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

現状エラーメッセージなどはありません。

該当のソースコード

3つのコンポーネントから成り立っています。

CustomRadioBtn.module.css

tsx

1.radioInput + .radioLabel:before{2 content: "";3 display: inline-block;4 background-size: contain;5 width: 140px;6 height: 140px;7}8 9.radioLabel {10 border-radius: 10px;11 color: gray;12 cursor: pointer;13 margin: auto;14 position: relative;15 text-align: center;16 transition: 0.5s;17}18 19.radioInput[value="slept less than 7hrs"]+.radioLabel:before{20 background-image: url(../../../public/images/sleep/lessThan7hrs.png);21}22.radioInput[value="slept more than 7hrs"]+.radioLabel:before{23 background-image: url(../../../public/images/sleep/moreThan7hrs.png);24}25 26/* below styling is not working */27.radioInput:checked + .radioLabel::before{28 border: 3px solid #000;29}30.radioInput{31 display: none;32}

CustomeIconContainer.tsx

tsx

1import { Controller, useForm } from "react-hook-form";2import styled from "styled-components";3import CustomIconInputForm from "../molecules/CustomIconInputForm";4import StyledFlexboxRow from "components/layouts/Flexbox/StyledFlexboxRow";5 6type Tdata = {7 sleep?: string;8 stool?: string;9 movement?: string;10};11 12interface IContainerProps {13 name: string;14 options: string[];15 desc: string;16 iconLog?: TIconValueData;17}18 19export type TIconValueData = {20 id?: number;21 sleep?: string;22 movement?: string;23 stool?: string;24};25 26/** 27 * CustomIconContainer - handle icon input 28 */29const CustomIconContainer = (props: IContainerProps) => {30 31 const { name, options, desc } = props;32 const { handleSubmit, control } = useForm();33 34 const onSubmit = (data: Tdata) => {35 if (data === undefined) {36 throw new Error("your log is undefined");37 }38 39 console.log(data);40 };41 42 const StyledLabel = styled.label`43 display: block;44 `;45 46 return (47 <div className="CustomIconContainer">48 <form onSubmit={handleSubmit(onSubmit)}>49 <StyledLabel>{desc}</StyledLabel>50 {/* mapping icon buttons */}51 <StyledFlexboxRow>52 {options.map((option, index) => (53 <Controller54 key={index}55 name={name}56 control={control}57 render={({ field: { onChange, ref, ...props } }) => (58 <CustomIconInputForm59 {...props}60 onChange={onChange}61 value={option}62 inputRef={ref}63 desc={option}64 />65 )}66 />67 ))}68 </StyledFlexboxRow>69 <button type="submit">Save</button>70 </form>71 </div>72 );73};74export default CustomIconContainer;

CustomIconInputForm.tsx

tsx

1import { IconDefinition } from "@fortawesome/fontawesome-common-types";2import { RefCallBack } from "react-hook-form";3import styles from "./CustomRadioBtn.module.css";4 5interface ICustomIconProps {6 onChange?: () => void;7 name?: string;8 value?: string;9 icon?: IconDefinition;10 desc: string;11 inputRef?: RefCallBack;12}13 14const CustomIconInputForm = (props: ICustomIconProps) => {15 16 const { name, onChange, inputRef, value } = props;17 18 const onChangeHandler = () => {19 if (value !== undefined) {20 onChange && onChange();21 }22 };23 return (24 <span className="CustomIconInputForm">25 <input26 ref={inputRef}27 name={name}28 value={value}29 onChange={() => {30 onChangeHandler;31 }}32 type="radio"33 {...props}34 className={styles.radioInput}35 />36 37 <label htmlFor={name} className={styles.radioLabel}>38 </label>39 </span>40 );41};42export default CustomIconInputForm;

試したこと

下記の対応をしてみたのですが変化ありませんでした。

• Font Awesomeではなく画像ダウンロードに切り替えた。
• styled.componentからcss moduleに切り替えた。

上記から、CSSではなさそうな気がします。おそらくreact-hook-formだと思うのですが、どこが抜けているのかまだ掴めていません。

補足情報（FW/ツールのバージョンなど）

Nextjs: "13.1.1"
react-hook-form: "^7.41.1"