reactjs - withRouter HOCをwithFormikで使用して、react-router-domから履歴小道具を渡す方法は?

Question

Formikを使用して、React でフォームを検証しています。withRouter HOCからwithFormik HOC に履歴プロップを渡す方法を知りたいですか?

import React, { Component } from 'react';
import { withFormik } from 'formik';
import Yup from 'yup';
import FormNaviagtion from './form-navigation';
import { withRouter } from 'react-router-dom';

class StepOne extends Component{
  render(){
    return(
      <div className="add-survey">
        <div className="survey-step">
          <EnhancedFormHistory />
        </div>
      </div>
    )
  }
}

const MyInnerForm = props => {
  const {
    values,
    touched,
    errors,
    dirty,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit,
    handleReset,
  } = props;
  const handlePrev = () => {

  }
  const handleNext = (e) => {
    e.preventDefault();
    props.submitForm();
    props.history.push(`/app/add-survey/step-two`);
  }
  return (
    <div>
      <div className="form-group">
        <label htmlFor="surveyTitle" className="form-label">Survey Name</label>
        <input
          id="surveyTitle"
          placeholder="Eg: Customer Survey"
          type="text"
          value={values.surveyTitle}
          onChange={handleChange}
          onBlur={handleBlur}
          className={errors.surveyTitle && touched.surveyTitle ? 'form-control error' : 'form-control'}
        />
        {errors.surveyTitle && touched.surveyTitle && 
          <div className="input-feedback">{errors.surveyTitle}</div>
        }
      </div>

      <div className="form-group">
        <label htmlFor="surveyCategory" className="form-label">Survey Category</label>
        <select
          id="surveyCategory"
          placeholder="Eg: Customer Survey"
          type="text"
          value={values.surveyCategory}
          onChange={handleChange}
          onBlur={handleBlur}
          className={errors.surveyCategory && touched.surveyCategory ? 'form-control error' : 'form-control'}
        >
          <option value="">Choose a category</option>
          <option value="1">Politics</option>
          <option value="2">Science and Technology</option>
          <option value="3">Entertainment</option>
          <option value="4">Sports</option>
        </select>
        {errors.surveyCategory &&
      touched.surveyCategory && <div className="input-feedback">{errors.surveyCategory}</div>}
      </div>

      <div className="footer-navigation">
        <a href="#" onClick={handlePrev} className="button button-secondary disabled">
          <i className="icon-arrow-back"></i> Return Back
        </a>
        <a href="#" onClick={handleNext} className="button button-primary">
          Proceed Next <i className="icon-arrow-forward"></i>
        </a>
      </div>
    </div>
  );
};

const EnhancedForm = withFormik({
  mapPropsToValues: () => ({ 
    surveyTitle: '',
    surveyCategory: ''
 }),
  validationSchema: Yup.object().shape({
    surveyTitle: Yup.string().required('Survey name is required'),
    surveyCategory: Yup.string().required('Survey category is required')
  }),
  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
})(MyInnerForm);

const EnhancedFormHistory = withRouter(EnhancedForm);

export default StepOne;

上記のコードを実行すると、次のエラーが発生します。

警告: setState(...): マウントされたコンポーネントまたはマウントされたコンポーネントのみを更新できます。これは通常、マウントされていないコンポーネントで setState() を呼び出したことを意味します。これはノーオペレーションです。Formik コンポーネントのコードを確認してください。