How to use react hook form's Controller with radio buttons

The Problem:

• Controller isn't working as I'd expect and I'm unable to register radio buttons in react hook form. It shows up as undefined.

What I'm trying to do:

• I have a reusable WrapperRadio component that sets up Controller and then renders my atomic RadioButton component. I then use WrapperRadio within RegistrationForm and want to be able to see the selected radio button value in the console when I hit the GetValues or Submit button.
• The end goal is ultimately to be able to specify the number/content of the atomic RadioButton component as children of WrapperRadio. This would allow me to re-use it but I'm try to get Controller working with a single input field before I move on.

Examples:

• Code Sandbox Link

Code Sandbox

1. Use WrapperRadio in RegistrationForm

    <form onSubmit={onSubmit}>
      <WrapperRadio
        control={control}
        name="radioSelection"
        label="This is a label"
      />
    ...
    </form>

2. Using Controller in WrapperRadio

    return (
        <div>
          <Controller
            control={control}
            name={name}
            render={({ field }) => <RadioButton {...field} label={label} />}
          />
        </div>
      );

3. Atomic RadioButton component

    return (
        <fieldset className="max-w-sm">
          <input
            ref={ref}
            id={name}
            name={name}
            type="radio"
            aria-label={label}
            {...props}
          />
          <label htmlFor={name} className="block text-sm font-medium text-gray-700">
            {label}
          </label>
        </fieldset>
      );

1. Use WrapperRadio in RegistrationForm - you should pass in a default value.

      <form onSubmit={onSubmit}>
         <WrapperRadio
           control={control}
           name="radioSelection"
           label="This is a label"
           value={true}
         />
       </form>
   

2. Using Controller in WrapperRadio

           return (
             <div>
                <Controller
                 control={control}
                 name={name}
                 render={({ field: {onChange, ...props} }) => 
                 <RadioButton
                 onChange={e => onChange(e.target.checked)}
                 {...props} label={label} />}
              />
             </div>