How to use the formik.withFormik function in formik

display: 'flex',
    justifyContent: 'center',
    padding: 15
  },
  modalText: {
    textAlign: 'center',
    paddingBottom: 15
  },
  formView: {
    flex: 1,
    alignSelf: 'stretch'
  },
  submit
});

const ContactFormWithFormik = withFormik({
  mapPropsToValues: () => ({ content: '', email: '', name: '' }),
  async handleSubmit(
    values,
    {
      resetForm,
      setErrors,
      setStatus,
      props: { onSubmit }
    }
  ) {
    Keyboard.dismiss();

    try {
      await onSubmit(values);
      resetForm();
    } catch (e) {

interface Props extends WithTranslation, OwnProps {}

interface OwnProps {
  twoFactorEnabled: boolean;
  wallets: WalletData[];
  currentWallet: WalletData;
  onSubmit(
    data: IWalletWithdrawFormValues,
    setSubmitting: SetSubmittingType
  ): void;
  errorMessage?: string;
}

const WalletWithdrawForm = compose>(
  translate(),
  withFormik({
    displayName: "wallet-withdraw",
    mapPropsToValues: ({ currentWallet: { id, currency } }) => ({
      [FIELDS.id]: id,
      [FIELDS.currency]: currency,
      [FIELDS.amount]: "",
      [FIELDS.address]: "",
      [FIELDS.twoFactorCode]: ""
    }),
    validationSchema: ({ t, twoFactorEnabled }: Props) =>
      lazy(
        (values: IWalletWithdrawFormValues): Schema => {
          switch (values[FIELDS.currency]) {
            case "GVT":
            case "ETH":
            case "USDT":
              return object().shape({

<div>
            
              {t("buttons.create")}
            
          </div>
        
      
    );
  }
}

FundNotificationCreateForm.propTypes = {};

export default compose(
  translate(),
  withFormik({
    displayName: "create-notification",
    mapPropsToValues: () =&gt; ({
      type: "FundCondition",
      conditionType: "Profit",
      conditionAmount: ""
    }),
    validationSchema: ({ t }) =&gt;
      object().shape({
        conditionAmount: number().required(
          t("notifications-page.create.amount-required")
        )
      }),
    handleSubmit: (values, { props }) =&gt; props.onSubmit(values)
  })
)(FundNotificationCreateForm);

name="content"
      component={RenderField}
      type="textarea"
      label={t('form.field.content')}
      value={values.content}
    />
    <div>
      {errors &amp;&amp; errors.errorMsg &amp;&amp; {errors.errorMsg}}
      <button type="submit" color="primary">
        {t('form.btnSubmit')}
      </button>
    </div>
  
);

const ContactFormWithFormik = withFormik({
  enableReinitialize: true,
  mapPropsToValues: () =&gt; ({ content: '', email: '', name: '' }),
  async handleSubmit(values, { resetForm, setErrors, setStatus, props: { onSubmit } }) {
    try {
      await onSubmit(values);
      resetForm();
      setStatus({ sent: true });
    } catch (e) {
      if (isFormError(e)) {
        setErrors(e.errors);
      } else {
        throw e;
      }
      setStatus({ sent: false });
    }
  },

);
};

const WalletAddFundsForm = compose>(
  withLoader,
  withFormik({
    displayName: "wallet-deposit",
    mapPropsToValues: ({ currentWallet: { id } }) => ({
      [FIELDS.id]: id
    }),
    handleSubmit: () => {}
  }),
  React.memo
)(_WalletAddFundsForm);
export default WalletAddFundsForm;

enum FIELDS {
  id = "id"
}

interface FormValues {
  [FIELDS.id]: string;

id="programWithdrawAmountFormSubmit"
          className="invest-form__submit-button"
          disabled={
            (!values[FIELDS.amount] || !isValid) && !values[FIELDS.withdrawAll]
          }
        >
          {t("withdraw-program.next")}
        
      
    
  );
};

const ProgramWithdrawAmountForm = compose>(
  translate(),
  withFormik({
    displayName: "withdraw-form",
    isInitialValid: true,
    mapPropsToValues: ({ formValues: { amount, withdrawAll } }) => ({
      [FIELDS.amount]: amount,
      [FIELDS.withdrawAll]: withdrawAll
    }),
    validationSchema: ({ t, availableToWithdraw }: Props) =>
      object().shape({
        [FIELDS.withdrawAll]: boolean(),
        [FIELDS.amount]: mixed().when(FIELDS.withdrawAll, {
          is: false,
          then: number()
            .moreThan(0, t("withdraw-program.validation.amount-is-zero"))
            .max(
              availableToWithdraw,
              t("withdraw-program.validation.amount-more-than-available")

interface Props
  extends OwnProps,
    WithTranslation,
    FormikProps {}

interface OwnProps {
  stopOutLevel: number;
  onSubmit: (
    values: StopOutLevelFormValues,
    setSubmitting: SetSubmittingType
  ) => void;
}

const StopOutLevel = compose>(
  translate(),
  withFormik({
    enableReinitialize: true,
    displayName: "edit-form",
    mapPropsToValues: ({ stopOutLevel }) => ({
      [FIELDS.stopOutLevel]: stopOutLevel || 100
    }),
    validationSchema: ({ t, stopOutLevel }: Props) =>
      object().shape({
        [FIELDS.stopOutLevel]: number()
          .min(
            10,
            t(
              "manager.create-program-page.settings.validation.stop-out-less-ten"
            )
          )
          .max(
            stopOutLevel || 100,

}

export interface ChangeBrokerFormValues {
  [FIELDS.brokerAccountTypeId]: string;
  [FIELDS.leverage]: number;
  [FIELDS.brokerFrom]: Broker;
}

const ChangeBrokerForm = compose<
  React.ComponentType<
    ChangeBrokerFormOwnProps & WithBlurLoaderProps
  >
>(
  withBlurLoader,
  translate(),
  withFormik({
    enableReinitialize: true,
    displayName: "edit-form",
    mapPropsToValues: ({
      data: { brokers, currentAccountTypeId },
      currentLeverage
    }) => ({
      [FIELDS.brokerFrom]: safeGetElemFromArray(
        brokers,
        broker =>
          !!broker.accountTypes.find(
            accountType => accountType.id === currentAccountTypeId
          )
      ),
      [FIELDS.brokerAccountTypeId]: currentAccountTypeId,
      [FIELDS.leverage]: currentLeverage
    }),

walletCurrency={wallet.currency}
          />
          
        
      
    );
  }
}

const CreateProgramSettings = compose>(
  translate(),
  withFormik({
    displayName: "CreateProgramSettingsForm",
    mapPropsToValues: ({
      wallet,
      broker,
      programCurrency,
      leverage,
      programsInfo,
      accountType
    }) => {
      const periodLength =
        programsInfo.periods.length === 1 ? programsInfo.periods[0] : undefined;
      return {
        [CREATE_PROGRAM_FIELDS.tradesDelay]: "None",
        [CREATE_PROGRAM_FIELDS.stopOutLevel]: 100,
        [CREATE_PROGRAM_FIELDS.brokerAccountTypeId]: accountType
          ? accountType.id