React-hook-form - Function components cannot be given refs - reactjs

Question

When trying to create a reusable input component that accepts a register react-hook-form Register function I get the error:
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()
Following that, and solutions similar to this I ended up with this, however as you can see when clicking submit the values don't seem to get updated on the form.
I assumed this might've been because react-hook-form's internal ref is different from the one being forwarded, but looking at the docs it doesn't seem like there's a way to pass a ref.
Seeing how react-number-format binds well using a Controller I also tried that, but it still doesn't seem to work.
How would I go about creating this reusable component that can bind to different forms?

Answer 1

In your App.tsx file, change TextInput props as below.
<TextInput
placeholder="Text Input"
errors={errors.testInput}
register={register}
name={"testInput"}
options={ { required: true }}
// {...register("testInput", { required: true })} Don't destructure register here
/>
If register is destructured, then ref is passed directly to TextInput which is a function component and thus error in console.
register docs: https://react-hook-form.com/api/useform/register
No need to use Controller for native components. But in your code for ControlInput to work, pass onChange from field to input's onChange attribute.
render={({ field: { onChange, name, value } }) => (
<input
id={name}
// name={name}
type={fieldType}
placeholder={placeholder}
value={value||''}
onChange={onChange}
/>
)}