How to submit form from parent component in Formik?

Question

JavaScript

Hi all. Please tell me how you can send a form (Formik) from the parent component. Prior to version 2 of Formik, I did this with `ref`. And in new versions I get the error `Warning: Function components cannot be given refs`. Posted the code in CodeSandbox too .
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;

Answer 1

Everything is in the documentation
https://jaredpalmer.com/formik/docs/api/formik#com...