Как в Formik отправить форму из родительского компонента?

Question

AltaiR @AltaiR-05

Как в Formik отправить форму из родительского компонента?

Привет всем. Подскажите пожалуйста как можно отправлять форму (Formik) из родительского компонента. До 2й версии Formik я это делал с помощью `ref`. А в новых версиях получаю ошибку `Warning: Function components cannot be given refs`. Выложил код и в CodeSandbox.

App.js

import React, { Component, createRef } from "react";
import ReactDOM from "react-dom";
import FormCustomer from "./FormCustomer";
import { Button } from "reactstrap";

import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

class App extends Component {
  formRef = createRef();

  onSubmit = () => {
    const form = this.formRef.current;

    form.submitForm().then(() => {
      console.log(JSON.stringify(form.state.values, null, 2));
    });
  };

  render() {
    return (
      <div className="App container">
        <FormCustomer formRef={this.formRef} />
        <Button color="primary" onClick={this.onSubmit}>
          Отправить
        </Button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Form.js

import React from "react";
import { FormGroup, Label } from "reactstrap";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";

const formValidationSchema = Yup.object().shape({
  docSerial: Yup.string().required(),
  docNumber: Yup.string().required()
});

const initialValues = {
  docSerial: "4323",
  docNumber: "234234"
};

const FormCustomer = ({ formRef }) => {
  return (
    <Formik
      ref={formRef}
      initialValues={initialValues}
      validationSchema={formValidationSchema}
      onSubmit={() => {}}
    >
      {({ errors, touched, handleSubmit }) => (
        <Form onSubmit={handleSubmit}>
          <FormGroup className="has-top-label">
            <Label>Серия</Label>
            <Field
              className="form-control"
              name="docSerial"
              autoComplete="off"
            />
            {errors.docSerial && touched.docSerial ? (
              <div className="invalid-feedback d-block">{errors.docSerial}</div>
            ) : null}
          </FormGroup>

          <FormGroup className="has-top-label">
            <Label>Номер</Label>
            <Field
              className="form-control"
              name="docNumber"
              autoComplete="off"
            />
            {errors.docNumber && touched.docNumber ? (
              <div className="invalid-feedback d-block">{errors.docNumber}</div>
            ) : null}
          </FormGroup>
        </Form>
      )}
    </Formik>
  );
};

export default FormCustomer;