react hook form controller component that returns `useController`, or `register` return based on controlled boolean prop (default: true ) requires your form wrapped in [FormProvider](https://react-hook-form.com/docs/formprovider) ``` tsx import type { FieldPath, FieldValues, ControllerProps, UseControllerProps, UseFormRegisterReturn, ControllerRenderProps, } from "react-hook-form"; import { useController, useFormContext } from "react-hook-form"; type ControlledProps< TFieldValues extends FieldValues, TName extends FieldPath, TTransformedValues, > = { controlled: true; } & ControllerProps; type UncontrolledProps< TFieldValues extends FieldValues, TName extends FieldPath, TTransformedValues, > = { controlled: false; render: ({ field, }: { field: UseFormRegisterReturn; }) => React.ReactNode; } & UseControllerProps; // Unified type type CustomControllerProps< TFieldValues extends FieldValues, TName extends FieldPath, TTransformedValues, > = | ControlledProps | UncontrolledProps; type renderField< TFieldValues extends FieldValues, TName extends FieldPath, > = UseFormRegisterReturn | ControllerRenderProps; function Controller< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, TTransformedValues = TFieldValues, >(props: CustomControllerProps) { const { register } = useFormContext(); if (props.controlled === false) { return props.render({ field: register(props.name, props.rules) }); } return props.render( useController(props) ); } export { Controller, type renderField }; ```