[BUG] - RadioGroup doesn't work with RHF

[UltraWelfare]

HeroUI Version

2.7.2

Describe the bug

When using a RadioGroup with Radio components, toggling to other radio options sets the value on the RHF form to null

Your Example Website or App

Code Sandbox

Steps to Reproduce the Bug or Issue

type Input = {
  type: string,
};

export default function IndexPage() {
  const { register, watch } = useForm<Input>();

  const values = watch();

  console.log(values);

  return (
    <DefaultLayout>
      <Form>
        <RadioGroup label="Type" {...register("type")}>
          <Radio value="customer">Customer</Radio>
          <Radio value="employee">Employee</Radio>
        </RadioGroup>
      </Form>
    </DefaultLayout>
  );
}

Toggling to customer, will console.log { type: "customer" } but toggling to employee will console.log { type: null }

Expected behavior

The value should be set instead of null

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear]

ENG-2148 [BUG] - RadioGroup doesn't work with RHF

[UltraWelfare]

Wrapping it in a Controller fixes it as a workaround

<Controller
  control={control}
  name={"type"}
  render={({ field: { onChange, onBlur, value } }) => (
    <RadioGroup
      label="Type"
      value={value}
      onBlur={onBlur}
      onChange={onChange}
    >
      <Radio value="customer">Customer</Radio>
      <Radio value="employee">Employee</Radio>
    </RadioGroup>
  )}
/>

[wingkwong]

which RHF version are you using? To speed up the process, you may share a sandbox instead so that we could look into it faster.

[UltraWelfare]

which RHF version are you using? To speed up the process, you may share a sandbox instead so that we could look into it faster.

The latest one 7.54.2. I edited my initial post to include the sandbox