Multiple, non-nested Forms sharing Props & Values

🐛 Bug report

I spent quite a bit of time in the sandbox to get you a reproducible example. I would appreciate any and all help with this!

Current Behavior

One page has two Formik components on it. Each Formik/form has a separate submit button that lives outside of the form, via a React Ref. When the submit button for FormA is called, it calls this..current.handleSubmit(). Likewise for FormB.

However, FormA is always rendered first since it's the form that appears when a user navigates that page, then sometimes FormB is rendered when a user switches navigation tabs. When this happens the values from FormA and FormB become 1 combined values field like values={"formAValue1": "x", "formBValue1": "y", etc...}. Like I said, they are two separate form instances, they aren't nested, they don't share a submit button or a ref.

But when you decide to submit one of the forms after they have both been rendered, the values that get submitted are from both formA and formB. I have no idea how this is happening.

Expected behavior

Two separate forms defined on the same page should not share a values object.

Reproducible example

https://codesandbox.io/s/formik-codesandbox-template-nonto

Suggested solution(s)

N/A

Your environment

Start with the linked CodeSandbox reproduction and inspect how the two Formik components are rendered and submitted through their separate refs. Verify that submitting either form keeps its values separate from the other form, using the reported Formik 1.5.8 and React 16.3.2 setup as a reference.