Undefined value with customized radio input using react-hook-form - forms

Question

I want to make radio button input forms without radio button circles. I am able to make the interface of the form, but the form is sending undefined data.
Additionally, I added CSS that put a solid black border when radio buttons are checked, but this is not working either.
If I remove the CSS display: none, the form works fine; the data shows value, not undefined.
can anyone help me with this? Thank you so much in advance!
The form consists of three components
CustomRadioBtn.module.css
.radioInput + .radioLabel:before{
content: "";
display: inline-block;
background-size: contain;
width: 140px;
height: 140px;
}
.radioLabel {
border-radius: 10px;
color: gray;
cursor: pointer;
margin: auto;
position: relative;
text-align: center;
transition: 0.5s;
}
.radioInput[value="slept less than 7hrs"]+.radioLabel:before{
background-image: url(../../../public/images/sleep/lessThan7hrs.png);
}
.radioInput[value="slept more than 7hrs"]+.radioLabel:before{
background-image: url(../../../public/images/sleep/moreThan7hrs.png);
}
/* below styling is not working */
.radioInput:checked + .radioLabel::before{
border: 3px solid #000;
}
.radioInput{
display: none;
}
CustomeIconContainer.tsx
import { Controller, useForm } from "react-hook-form";
import styled from "styled-components";
import CustomIconInputForm from "../molecules/CustomIconInputForm";
import StyledFlexboxRow from "components/layouts/Flexbox/StyledFlexboxRow";
type Tdata = {
sleep?: string;
stool?: string;
movement?: string;
};
interface IContainerProps {
name: string;
options: string[];
desc: string;
iconLog?: TIconValueData;
}
export type TIconValueData = {
id?: number;
sleep?: string;
movement?: string;
stool?: string;
};
/**
* CustomIconContainer - handle icon input
*/
const CustomIconContainer = (props: IContainerProps) => {
const { name, options, desc } = props;
const { handleSubmit, control } = useForm();
const onSubmit = (data: Tdata) => {
if (data === undefined) {
throw new Error("your log is undefined");
}
console.log(data);
};
const StyledLabel = styled.label`
display: block;
`;
return (
<div className="CustomIconContainer">
<form onSubmit={handleSubmit(onSubmit)}>
<StyledLabel>{desc}</StyledLabel>
{/* mapping icon buttons */}
<StyledFlexboxRow>
{options.map((option, index) => (
<Controller
key={index}
name={name}
control={control}
render={({ field: { onChange, ref, ...props } }) => (
<CustomIconInputForm
{...props}
onChange={onChange}
value={option}
inputRef={ref}
desc={option}
/>
)}
/>
))}
</StyledFlexboxRow>
<button type="submit">Save</button>
</form>
</div>
);
};
export default CustomIconContainer;
CustomIconInputForm.tsx
import { IconDefinition } from "#fortawesome/fontawesome-common-types";
import { RefCallBack } from "react-hook-form";
import styles from "./CustomRadioBtn.module.css";
interface ICustomIconProps {
onChange?: () => void;
name?: string;
value?: string;
icon?: IconDefinition;
desc: string;
inputRef?: RefCallBack;
}
const CustomIconInputForm = (props: ICustomIconProps) => {
const { name, onChange, inputRef, value } = props;
const onChangeHandler = () => {
if (value !== undefined) {
onChange && onChange();
}
};
return (
<span className="CustomIconInputForm">
<input
ref={inputRef}
name={name}
value={value}
onChange={() => {
onChangeHandler;
}}
type="radio"
{...props}
className={styles.radioInput}
/>
<label htmlFor={name} className={styles.radioLabel}>
</label>
</span>
);
};
export default CustomIconInputForm;
no radio button circles
with radio button circles