ref not working correctly with react-hook-form

[Git-Hub-User-0]

In the below code, when I call handleSubmit it throws e.focus not a function error.

import React from "react";
import { useForm, Controller } from "react-hook-form";
import CurrencyInput from "react-currency-input";

export default function App() {
  const {
    handleSubmit,
    control,
    reset,
    formState: { errors },
  } = useForm({
    defaultValues: {
      currencyInput: "",
    },
    resolver: (values) => {
      const _errors = {};
      console.log(Number(values.currencyInput));
      if (Number(values.currencyInput) <= 0) {
        _errors.currencyInput = { message: "Required" };
      }
      return { errors: _errors };
    },
  });
  const onSubmit = (data) => console.log(data);
  const handleOnChange = (data) => console.log("onChange: ", data);
  const ref = React.createRef();
  const value = ref.current?.value;
  console.log(errors);

  return (
    <form className="App" onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="currencyInput"
        control={control}
        rules={{ required: true }}
        render={({ field }) => (
          <>
            <CurrencyInput
              onChange={handleOnChange(field.onChange)}
              ref={field.ref}
              value={field.value}
            />
            <p style={{ color: "red" }}>{errors?.currencyInput?.message}</p>
          </>
        )}
      />
      <input type="submit" />
    </form>
  );
}

This works perfectly with html inputs, but not with this library?
Can anyone please help with this urgently?
@jsharpe @jsillitoe @sevos @panupan @zhuangya