withFormik issue

withFormik.tsx

export interface IProfilePageProps {
  appStore?: AppStore;
  profileStore?: ProfileStore;
}

@inject('appStore', 'profileStore') @observer
class ProfileForm extends React.Component<FormikProps<any> & IProfilePageProps, {}> {
  public componentDidMount() {
    this.props.appStore.setPageTitle('Profile', 'View and edit your personal details');
    if (this.props.profileStore.profile.loading) {
      this.props.profileStore.loadProfile();
    }
  }

  public render() {
    return (
      <div className="container-fluid" style={{ maxWidth: '1200px' }}>
        <form onSubmit={this.props.handleSubmit}>
          <div style={{ margin: '1rem 0' }}>
            <h3 style={{ fontFamily: 'monospace' }} />
            <pre
              style={{
                background: '#f6f8fa',
                fontSize: '.65rem',
                padding: '.5rem',
              }}
            >
              <strong>props</strong> = {JSON.stringify(this.props.values, null, 2)}
            </pre>
          </div>
          <ProfileOverview />

          {!this.props.profileStore.profile.editing &&
            <ProfilePersonal {...this.props.values} />
          }

          <ProfileContact 
            changeHandler={this.props.handleChange} 
            errors={this.props.errors} 
            touched={this.props.touched}
            {...this.props.values} 
          />

          <ProfileAddresses 
            changeHandler={this.props.handleChange} 
            errors={this.props.errors} 
            touched={this.props.touched} 
            {...this.props.values} 
          />

          <ProfilePreferences 
            changeHandler={this.props.handleChange} 
            {...this.props.values} 
          />

          {this.props.profileStore.profile.editing && 
            !this.props.profileStore.profile.loading &&
              <div className="btn-group btn-group-xs-stack pull-right" style={{ marginBottom: '20px' }}>
                <button onClick={() => { this.props.profileStore.handleCancelClick(); }} className="btn btn-danger">Discard Changes</button>
                <button type="submit" className="btn btn-success">Save Profile</button>
              </div>
          }

          {this.props.profileStore.profile.editing && 
            this.props.profileStore.profile.loading &&
              <div className="btn-group btn-group-xs-stack pull-right" style={{ marginBottom: '20px' }}>
                <button className="btn btn-danger disabled">Discard Changes</button>
                <button className="btn btn-success disabled">Save Profile</button>
              </div>
          }
        </form>
      </div>
    );
  }
}

export const ProfilePage = withFormik<any, any>({
  enableReinitialize: true,
  handleSubmit: (values, { props, setSubmitting }) => {
    setSubmitting(true);
  },
  mapPropsToValues: props => {
    console.log("props", props.profileStore.profile);
    return {
      billingAddress: props.profileStore.profile.addresses.billingAddress,
      contactMethod: props.profileStore.profile.preferences.contactMethod,
      dateOfBirth: props.profileStore.profile.personal.dateOfBirth,
      emailAddress: props.profileStore.profile.contact.emailAddress,
      firstName: props.profileStore.profile.personal.firstName,
      lastName: props.profileStore.profile.personal.lastName,
      phoneHome: props.profileStore.profile.contact.phoneHome,
      phoneMobile: props.profileStore.profile.contact.phoneMobile,
      phoneWork: props.profileStore.profile.contact.phoneWork,
      serviceAddress: props.profileStore.profile.addresses.serviceAddress,
      shippingAddress: props.profileStore.profile.addresses.shippingAddress
    };
  },
  validationSchema: Yup.object().shape({
    dateofBirth: Yup.date()
      .required('Date is required'),
    emailAddress: Yup.string()
      .email('Please enter a valid email address!')
      .required('Please enter an email address'),
    firstName: Yup.string()
      .required('First name is required!'),
    lastName: Yup.string()
      .required('Last name is required!'),
    phoneHome: Yup.number()
      .required('Home Phone is required!'),
    phoneMobile: Yup.number()
      .required('Mobile Phone is required!'),
    phoneWork: Yup.number()
      .required('Work Phone is required!'),
  })
})(ProfileForm);