Formik does not update value to IonSelect tag

Issue

I have an Array that takes some strings of Category, and I want to update the Array field based on the selectedCategory using formik. Below is what I have done.

categories.ts

const categories: string[] = [
  "Gadgets / Electronics",
  "Home accessories",
  "Phones & Tablets",
  "Computing",
  "Office Accessories",
  "Sporting Goods",
  "Automobile",
  "Stationarities",
  "Farming",
  "Books",
  "Technologies",
  "Medicine",
  "Architecture ",
  "Oil & Gas",
  "Discoveries",
  "Real Estate / Housing",
  "Wears (Footwears)",
  "Textile Industry",
  "Paint Industry",
  "Furniture",
  "Apps/Software ",
];

export default categories;

SignUp.tsx

import categories from "../../data/categories";

I set my initialValues to

 salesCategories: [],

....
 <IonCol size="12" className="ion-no-padding">
                        <div className="p-sm">
                          <IonItem className="form-label ion-no-padding">
                            <IonLabel
                              position="floating"
                              className="fw-light color-light"
                            >
                              Select Sales Category
                            </IonLabel>
                            <IonSelect
                              multiple
                              name="salesCategories"
                              onChange={handleChange}
                              onBlur={handleBlur}
                            >
                              {categories.map((cat, idx) => (
                                <IonSelectOption key={idx}>
                                  {cat}
                                </IonSelectOption>
                              ))}
                            </IonSelect>
                          </IonItem>
                          {errors.salesCategories && touched.salesCategories && (
                            <span className="error-text">
                              {errors.salesCategories}
                            </span>
                          )}
                        </div>
                      </IonCol>

I get this Error below each time I try to select an item, and it is meant to be multiple select field. I don't understand the reason Formik can't update the value.

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at getSelectedValues (Formik.tsx:1133)
    at Formik.tsx:635
    at Formik.tsx:655
    at HTMLElement.<anonymous> (Formik.tsx:1202)
    at HTMLElement.handler (attachProps.ts:105)
    at emitEvent (index-3ccd7557.js:1)
    at Object.emit (index-3ccd7557.js:1)
    at e.valueChanged (ion-select_3.entry.js:1)
    at index-3ccd7557.js:1
    at Array.map (<anonymous>)
    at setValue (index-3ccd7557.js:1)
    at HTMLElement.set [as value] (index-3ccd7557.js:1)
    at attachProps.ts:35
    at Array.forEach (<anonymous>)
    at attachProps (attachProps.ts:12)
    at ReactComponent.componentDidUpdate (createComponent.tsx:50)
    at commitLifeCycles (react-dom.development.js:20684)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21893)
    at dispatchAction (react-dom.development.js:16139)
    at Formik.tsx:662
    at Formik.tsx:1202
    at Formik.tsx:693
    at Formik.tsx:703
    at HTMLElement.<anonymous> (Formik.tsx:1202)
    at HTMLElement.handler (attachProps.ts:105)
    at emitEvent (index-3ccd7557.js:1)
    at Object.emit (index-3ccd7557.js:1)
    at HTMLButtonElement.onBlur (ion-select_3.entry.js:1)

Formik does not get the Value.

Solution

Just use one of formik goodies setFieldValue

 <IonSelect
   multiple
   name="salesCategories"
   onIonChange={(e: any) =>
   setFieldValue("salesCategories", e.target.value)
   }
   onIonBlur={handleBlur}
    onBlur={handleBlur}
 >

Answered By - AbdulAzeez Olanrewaju