flashcards-example-project/src/components/ui/controlled/controlled-text-field/controlled-text-field.tsx

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

import { TextField, TextFieldProps } from '@/components'

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

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

    return <TextField {...props} {...field} errorMessage={error?.message} id={props.name} />
}