\n *
\n *
{fieldState.isTouched && \"Touched\"}
\n *
{formState.isSubmitted ? \"submitted\" : \"\"}
\n *
\n * );\n * }\n * ```\n */\nfunction useController(props) {\n const methods = useFormContext();\n const { name, control = methods.control, shouldUnregister } = props;\n const isArrayField = isNameInFieldArray(control._names.array, name);\n const value = useWatch({\n control,\n name,\n defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),\n exact: true,\n });\n const formState = useFormState({\n control,\n name,\n });\n const _registerProps = React.useRef(control.register(name, {\n ...props.rules,\n value,\n }));\n _registerProps.current = control.register(name, props.rules);\n React.useEffect(() => {\n const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;\n const updateMounted = (name, value) => {\n const field = get(control._fields, name);\n if (field) {\n field._f.mount = value;\n }\n };\n updateMounted(name, true);\n if (_shouldUnregisterField) {\n const value = cloneObject(get(control._options.defaultValues, name));\n set(control._defaultValues, name, value);\n if (isUndefined(get(control._formValues, name))) {\n set(control._formValues, name, value);\n }\n }\n return () => {\n (isArrayField\n ? _shouldUnregisterField && !control._state.action\n : _shouldUnregisterField)\n ? control.unregister(name)\n : updateMounted(name, false);\n };\n }, [name, control, isArrayField, shouldUnregister]);\n return {\n field: {\n name,\n value,\n onChange: React.useCallback((event) => _registerProps.current.onChange({\n target: {\n value: getEventValue(event),\n name: name,\n },\n type: EVENTS.CHANGE,\n }), [name]),\n onBlur: React.useCallback(() => _registerProps.current.onBlur({\n target: {\n value: get(control._formValues, name),\n name: name,\n },\n type: EVENTS.BLUR,\n }), [name, control]),\n ref: (elm) => {\n const field = get(control._fields, name);\n if (field && elm) {\n field._f.ref = {\n focus: () => elm.focus(),\n select: () => elm.select(),\n setCustomValidity: (message) => elm.setCustomValidity(message),\n reportValidity: () => elm.reportValidity(),\n };\n }\n },\n },\n formState,\n fieldState: Object.defineProperties({}, {\n invalid: {\n enumerable: true,\n get: () => !!get(formState.errors, name),\n },\n isDirty: {\n enumerable: true,\n get: () => !!get(formState.dirtyFields, name),\n },\n isTouched: {\n enumerable: true,\n get: () => !!get(formState.touchedFields, name),\n },\n error: {\n enumerable: true,\n get: () => get(formState.errors, name),\n },\n }),\n };\n}\n\n/**\n * Component based on `useController` hook to work with controlled component.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)\n *\n * @param props - the path name to the form field value, and validation rules.\n *\n * @returns provide field handler functions, field and form state.\n *\n * @example\n * ```tsx\n * function App() {\n * const { control } = useForm