issue: Uncaught TypeError: fieldRef.focus is not a function error in React-hook-form setFocus with Reactstrap Input

The issue is still there on version “react-hook-form”: “^7.39.4”,

Tried to pass error to Cleave components or Flatpickr and everytime an error is generated the focus method crashes the app giving this error:

Env

• Operating System version: MacOS 13.0.1 (22A400)
• Browser version: Chrome Version 107.0.5304.110 (Official Build) (arm64)

react-dom.development.js:22839 Uncaught TypeError: elm.focus is not a function
    at Object.focus (useController.ts:132:30)
    at focusFieldBy (focusFieldBy.ts:18:18)
    at Object._focusError (createFormControl.ts:1042:5)
    at useForm.ts:103:38
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
    at commitPassiveMountEffects (react-dom.development.js:24866:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:3)
focus @ useController.ts:132
focusFieldBy @ focusFieldBy.ts:18
_focusError @ createFormControl.ts:1042
(anonymous) @ useForm.ts:103
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651

Only if I set “shouldFocusError” to false everything work fine.

*** relevant code ***

  // ** Hooks
  const {
    reset,
    control,
    setValue,
    handleSubmit,
    formState: { errors, isValid }
  } = useForm({
    mode: 'onChange',
    resolver: yupResolver(ValidationSchema),
    shouldFocusError: true,
    defaultValues: {
      price: '',
      date: '',
    }
  })

Components

 <Col md="6" className="mb-1">
                <Label className="form-label" for="price">
                  {t('Expense Price')} <span className="text-danger">*</span>
                </Label>
                <Controller
                  id="price"
                  control={control}
                  name="price"
                  render={({ field }) => (
                    <Cleave
                      className="form-control"
                      options={{
                        numeral: true,
                        numeralDecimalMark: '.',
                        delimiter: ''
                      }}
                      placeholder="78.00"
                      invalid={errors.price}
                      {...field}
                    />
                  )}
                />
                {errors.price && (
                  <Alert color="danger" isOpen={true}>
                    <div className="alert-body">
                      <AlertCircle size={15} />{' '}
                      <span className="ms-1">{errors.price?.message}</span>
                    </div>
                  </Alert>
                )}
              </Col>
             <Col md="6" className="mb-1">
                <Label className="form-label" for="date">
                  {t('Expense Date')} <span className="text-danger">*</span>
                </Label>
                <Controller
                  control={control}
                  id="date"
                  name="date"
                  render={({ field }) => (
                    <Flatpickr
                      options={{
                        disableMobile: true, // TODO: disables the native mobile calendar
                        locale: {
                          firstDayOfWeek: 1 // start week on Monday
                        },
                        minDate: getFormattedDate(selectedPermit.start),
                        maxDate: getFormattedDate(selectedPermit.end)
                      }}
                      className={classnames('form-control', {
                        'is-invalid': errors.date
                      })}
                      {...field}
                    />
                  )}
                />
                {errors.date && (
                  <FormFeedback>{errors.date?.message}</FormFeedback>
                )}
           </Col>

working version: https://codesandbox.io/s/stupefied-mahavira-9s2ffl?file=/src/App.js

import { Controller, useForm } from "react-hook-form";
import Headers from "./Header";
import DatePicker from "react-datepicker";
import "./styles.css";

export default function App() {
  const { register, handleSubmit, control } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <div>
      <Headers />

      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName")} placeholder="First Name" />
        <Controller
          name="test"
          control={control}
          rules={{
            required: true
          }}
          render={({ field }) => (
            <DatePicker
              selected={field.value}
              onChange={(date) => field.onChange(date)}
              ref={(ref) => {
                field.ref({
                  focus: ref.setFocus
                });
              }}
            />
          )}
        />
        <input type="submit" />
      </form>
    </div>
  );
}