Use React Hook Form With Custom Textinput

I'm trying to use react hook form with custom TextInput. Before I was using materials input and everything was working correctly. A found one way that I can achieve it but I'm not

Solution 1:

You've to pass the ref and below is one of the ways to achieve that

exportinterfaceTextFieldPropsextendsReact.PropsWithoutRef<JSX.IntrinsicElements["input"]> {
    error: string | undefined;
    label: string;
}

constTextField = forwardRef<HTMLInputElement, LabeledTextFieldProps>({ errorm label, ...props }, ref) => {
    return (
      <><input {...props} ref={ref}></input>
        {error}
      </>
    )
  });

You're to be able to use it like:

<TextField {...register('username')} label="Username label"error={formState.errors.username.message}/>