Can you have multiple <Formik> component but referencing the same Form,

[rifqirosyidi]

Is Formik possible to have the multiple Formik component but still referencing the same Formik component used before?. i want to separate the field and button submit on Formik because of some layout positioning in JSX, this happens because my button is on the very bottom while the field was on the very top? is there any way to achieve this or just simply wrap the root using Formik?

<!-- exiting html... -->
<Formik>
    ... some Field
<Formik>
<!-- exiting html... -->
...
<!-- exiting html... -->
<Formik>
    <button type="submit">Submit</button>
<Formik>
<!-- exiting html... -->

[johnrom]

You can give your <form /> an id and do <button form={formId} type="submit">Submit</button>

[johnrom]

// using `form="my-form"`, HTML automatically links the submit to the `<form />` element printed by `Form`.
export const MyForm = () => (
  <div>
    <Formik {...formikProps}>
      <Form id="my-form" />
    </Formik>
    <button form="my-form" type="submit">Submit</button>
  </div>
);

[rifqirosyidi]

Thanks 👍