WithFormikCustomProps.tsx

import { connect, FormikProps, withFormik } from "formik";
import * as React from "react";
import * as yup from "yup";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";

const _TextField = props => <TextField {...props} />;
const FormikTextField = connect(_TextField);

type Values = {
  name: string;
};
type Props = {} & FormikProps<Values>;
const WithFormikCustomPropsInnerForm = ({
  handleChange,
  isValid,
  isSubmitting,
  handleSubmit,
  ...props
}: Props) => {
  const isButtonDisabled = !isValid || isSubmitting;
  return (
    <>
      <FormikTextField
        name={"name"}
        placeholder={"Type your name"}
        label={"Edit name"}
        onChange={handleChange}
      />
      <Button disabled={isButtonDisabled} onClick={handleSubmit}>
        Submit
      </Button>
    </>
  );
};

const WithFormikCustomProps = withFormik<Props, Values>({
  mapPropsToValues: () => {},
  validationSchema: yup.object({
    name: yup.string().required("Name is required")
  }),
  handleSubmit: (values: Values, formikBag: Props) => {},
  customProps: props => {
    // do whatever you want
    // inject at props, just like handleSubmit
  }
})(WithFormikCustomPropsInnerForm);

export default WithFormikCustomProps;