Impossible to assign object ref to Formik's innerRef - v2.1.2 regression

[TeoTN]

🐛 Bug report

Current Behavior

It's not possible to assign object ref (created with useRef) to innerRef property of Formik. I need this to be able to trigger submit outside of the formik, without creating wrappers that translate object ref to functional ref.

Expected behavior

innerRef should accept both functional and object-based refs.

Reproducible example

https://codesandbox.io/s/formik-inner-ref-vr0fi

Type 'MutableRefObject<FormModel | undefined>' is not assignable to type '((instance: any) => void) & MutableRefObject<FormModel | undefined>'.
  Type 'MutableRefObject<FormModel | undefined>' is not assignable to type '(instance: any) => void'.
    Type 'MutableRefObject<FormModel | undefined>' provides no match for the signature '(instance: any): void'

Suggested solution(s)

Formik should accept React.Ref<FormikProps<T> | undefined>?

Additional context

Regression was introduced in 2.1.2 - you can play around with version in the sandbox

Your environment

Software	Version(s)
Formik	2.1.4
React	16.13.1
TypeScript	3.9.6
Browser	Edge
npm/Yarn	yarn
Operating System	Ubuntu 20.04 @ WSLv1

[GuillaumeDmns]

Same here, I solved it adding as any after useRef :
const formRef = useRef<FormikValues>() as any;

I know it's not a good way to solve the problem, but it actually works.

[TeoTN]

I wouldn't say it solves the problem, you're basically opting out from type checks completely.
Instead, you can wrap object ref to a functional one, to maintain type safety.
But the fact is that library's types are broken

[johnrom]

This type is incorrect:

const ref = React.useRef<FormModel>();

Formik's ref accepts a type of FormikProps<FormModel>. Additionally, React's own typing between a ref used for an element and useRef (used for any value) is different because an element ref requires a null value whereas useRef accepts undefined or null or neither if you instantiate with an object. Therefore, when you do React.useRef<FormikProps<FormModel>>();, the actual type of this ends up being a ref of FormikProps<FormModel> | undefined" which is not compatible with an element ref which must be FormikProps<FormModel> | null. This is easily solved by passing null as the instantiator to your useRef:

// works fine
const formikRef = React.useRef<FormikProps<FormModel>>(null);

return <Formik innerRef={formikRef} {...etc} />;

https://codesandbox.io/s/formik-inner-ref-forked-11ygj?file=/src/App.tsx

[johnrom]

I added a few elements to my codesandbox above to show this is not a Formik issue and a useRef without null will always cause an error in React.