react-hook-form utility function for attaching refs on register

registerWithRef.ts

import { MutableRefObject } from "react";
import {
  FieldPath,
  FieldValues,
  RegisterOptions,
  UseFormRegister,
} from "react-hook-form";

/** attach your ref to the register function from react-hook-form */
export const registerWithRef = <T extends FieldValues = FieldValues>(
  register: UseFormRegister<T>,
) => {
  return <Ref, N extends FieldPath<T>>(
    name: N,
    // add ref attribute to second arg of register
    options: RegisterOptions<T, N> & { ref: MutableRefObject<Ref> },
  ): ReturnType<typeof register> => {
    // modify returned ref so that we also attach the instance to our ref.
    const { ref, ...newOptions } = options;
    const { ref: returnedRef, ...rest } = register(name, newOptions);
    // eslint-disable-next-line
    const newRef = (e: any) => {
      returnedRef(e);
      ref.current = e;
    };

    return { ref: newRef, ...rest };
  };
};