How to use MDBSelect with Formik

Expected behavior

I want to use MDBSelect with Formik.

Actual behavior

But I can not find onChange event from MDBSelect.

Resources (screenshots, code snippets etc.)

This is my code snippet

<Formik
    initialValues={initialValues}
    validate={validateForm}
    onSubmit={handleSubmit}
    >
    {({values, touched, errors, handleChange, handleBlur, handleSubmit, isSubmitting}) => (
      <form onSubmit={handleSubmit}>
        <div className="white-text">
          ...
          <MDBRow>
            <MDBCol md="6">
              <MDBSelect label={t('AUTH.COUNTRY_CODE')} className="mt-3 mb-0 white" selected={[countryCode]} onChange={handleChange} >
                <MDBSelectInput/>
                <MDBSelectOptions>
                  <MDBSelectOption value={COUNTRY_CODE.BAHRAIN} >{COUNTRY_CODE.BAHRAIN} - {t("COMMON.GCC_COUNTRIES.BAHRAIN")}</MDBSelectOption>
                  <MDBSelectOption value={COUNTRY_CODE.KUWAIT} >{COUNTRY_CODE.KUWAIT} - {t("COMMON.GCC_COUNTRIES.KUWAIT")}</MDBSelectOption>
                  <MDBSelectOption value={COUNTRY_CODE.OMAN} >{COUNTRY_CODE.OMAN} - {t("COMMON.GCC_COUNTRIES.OMAN")}</MDBSelectOption>
                  <MDBSelectOption value={COUNTRY_CODE.QATAR} >{COUNTRY_CODE.QATAR} - {t("COMMON.GCC_COUNTRIES.QATAR")}</MDBSelectOption>
                  <MDBSelectOption value={COUNTRY_CODE.SAUDI_ARABIA} >{COUNTRY_CODE.SAUDI_ARABIA} - {t("COMMON.GCC_COUNTRIES.SAUDI_ARABIA")}</MDBSelectOption>
                  <MDBSelectOption value={COUNTRY_CODE.UAE} >{COUNTRY_CODE.UAE} - {t("COMMON.GCC_COUNTRIES.UAE")}</MDBSelectOption>
                </MDBSelectOptions>
              </MDBSelect>
              {errors.countryCode === VALIDATION.REQUIRED && <div className="text-left invalid-field2">{t("COMMON.VALIDATION.REQUIRED", {field: t("AUTH.COUNTRY_CODE")})}</div>}
            </MDBCol>
            <MDBCol md="6">
              <MDBInput id="phone" name="phone" type="text" label={t("AUTH.PHONE")} background containerClass="mt-3 mb-0" value={values.phone}  onChange={handleChange} onBlur={handleBlur}>
                {!!touched.phone && errors.phone === VALIDATION.REQUIRED && <div className="text-left invalid-field2">{t("COMMON.VALIDATION.REQUIRED", {field: t("AUTH.PHONE")})}</div>}
                {!!touched.phone && errors.phone === VALIDATION.INVALID && <div className="text-left invalid-field2">{t("COMMON.VALIDATION.INVALID", {field: t("AUTH.PHONE")})}</div>}
              </MDBInput>
            </MDBCol>
          </MDBRow>
          ...
        </div>
        <div className="text-center mt-4 mb-3 mx-5">
          <MDBBtn type="submit" color="white" rounded className="full-width z-depth-1a blue-grey-text" disabled={!!loading || !!isSubmitting || (!!errors && !!Object.keys(errors).length)}>
            {!isSubmitting && <MDBIcon size="lg" icon={"user-plus"} />}
            {!!isSubmitting && <div className="spinner-grow spinner-grow-sm" role="status"/>}
            {!isSubmitting && t("AUTH.SIGN_UP")}
          </MDBBtn>
        </div>
      </form>
    )
    }
</Formik>