HandleReset throwing error in formik while using it with react

Question

I have a form, each time I click on the submit button, it throws this error: "Cannot read property 'handleReset' of undefined". Here are my codes.

import React, { Component } from "react";
import { withFormik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

class MyForm extends Component {
  state = {
    myDetails: [
      { name: "name", type: "text", placeholder: "enter your name" },
      { name: "email", type: "email", placeholder: "enter your email" },
      {
        name: "password",
        type: "password",
        placeholder: "enter your password"
      },
      { name: "dept", type: "text", placeholder: "enter your department" }
    ]
  };
  render() {
    return (
      <React.Fragment>
        <Form>
          {this.state.myDetails.map((detail, i) => (
            <div key={i}>
              <Field
                name={detail.name}
                type={detail.type}
                placeholder={detail.placeholder}
              />
              <ErrorMessage name={detail.name} />
            </div>
          ))}
          <button type="submit">Submit form</button>
        </Form>
      </React.Fragment>
    );
  }
}
const myFormik = withFormik({
  mapPropsToValues({ name, email, password }) {
    return {
      name: "",
      email: "",
      password: ""
    };
  },
  validationSchema: Yup.object().shape({
    name: Yup.string().required(),
    email: Yup.string()
      .email()
      .required(),
    password: Yup.string().required()
  }),
  handleSubmit: values => {
    console.log(values);
  }
})(MyForm);
export default MyForm;

How do I resolve it. I have been battling with this but cannot find an answer to it.

Answer 1

I have seen the bug, I ought to export "MyFormik" which is the wrapper but I exported "MyForm".