import React from 'react' ; import { Controller , UnpackNestedValue , FieldValuesFromControl , Control , } from 'react-hook-form' ; import { formatName } from './logic/formatName' ; import { DeepPath , Options , ControllerProps } from './types' ; export const useTypedController = < TFieldValues extends UnpackNestedValue < FieldValuesFromControl < TControl > > , TControl extends Control = Control > ( { control , } ) => { const controlRef = React . useRef ( control ) ; controlRef . current = control ; const TypedController = React . useCallback ( < UFieldValues extends TFieldValues , TFieldName extends DeepPath < UFieldValues , TFieldName > , TAs extends 'input' | 'select' | 'textarea' > ( { name , ... rest } ) => { const formattedName = formatName ( name as any ) ; return ( < Controller name = { formattedName as any } control = { controlRef . current } { ... rest } />); } , [ ] ) ; return TypedController ; } ;