When working with third-party UI component libraries such as Material UI or Ant Design, you often encounter custom input components that do not natively work with React Hook Form's register method. These components usually manage their own internal state and do not expose a ref in the same way as standard HTML inputs. To address this, React Hook Form provides the Controller component, which acts as a bridge between your form state and these custom UI components.

The Controller component allows you to control the value and event handlers of non-standard input components. You specify the name of the field, provide the control object from useForm, and define how to render the custom component. Inside the render prop, you receive field properties such as value and onChange, which you must pass to the UI component to ensure it stays in sync with the form state. This approach ensures that even complex UI elements like date pickers, dropdowns, or sliders can participate fully in form validation and state management.

Integrating React Hook Form with UI libraries follows a few common patterns. The most frequent approach is to use Controller for every custom input that does not support ref forwarding or does not behave like a native input. While this pattern is reliable, a common pitfall is forgetting to correctly map the value and onChange props from the Controller to the UI component, which can lead to inputs not updating as expected or validation not triggering. Another issue arises when you attempt to use register directly with custom components, which may silently fail or cause unexpected behavior. Always check the documentation of both React Hook Form and the UI library to confirm the correct integration method. Properly handling default values and ensuring form-level validation rules are respected can also be challenging if the component's internal state is not synchronized with the form state.