flashcards-example-project/src/components/ui/controlled/controlled-radio-group/controlled-radio-group.tsx

import { Control, FieldPath, FieldValues, useController } from 'react-hook-form'

import { RadioGroup, RadioGroupProps } from '@/components/ui'

export type ControlledRadioGroupProps<TFieldValues extends FieldValues> = {
    control: Control<TFieldValues>
    name: FieldPath<TFieldValues>
} & Omit<RadioGroupProps, 'id' | 'onChange' | 'value'>

export const ControlledRadioGroup = <TFieldValues extends FieldValues>(
    props: ControlledRadioGroupProps<TFieldValues>
) => {
    const {
        field: { onChange, ...field },
        fieldState: { error },
    } = useController({
        control: props.control,
        name: props.name,
    })

    return (
        <RadioGroup
            {...props}
            {...field}
            errorMessage={error?.message}
            id={props.name}
            onValueChange={onChange}
        />
    )
}