Forkmik handleChange not updating dropdown value in React.js

Question

I'm trying to use Form.Select from semantic ui react to build a dropdrown. I'm sending an array of objects with the following properties to fill dropdown options:

DelivererForDropdown = {
                          key: deliverer.id,
                          value: deliverer.id,
                          text: deliverer.userName,
                          id: deliverer.id
                        };

The problem I'm facing is that the handleChange event from Formik is not updating my selection. I'm using this event for other inputs and it works well.

    <Form.Select 
      type="text"
      placeholder="Repartidor" 
      name="deliverer"
      options={deliverersForDropdown}
      search
      onChange={handleChange}
      error={errors.deliverer}
      value={values.deliverer}
    />

Answer 1

You can use Formik function setFieldValue() to manually set the value in the handler onChange():

 <Formik
      enableReinitialize={true}
      initialValues={initialValues}
      onSubmit={async (values, { resetForm }) => {
        console.log(JSON.stringify(values, null, 2));
      }}
    >
      {({ isSubmitting, values, setFieldValue, setTouched, errors }) => {
        return (
          <FormikForm>
            <Form.Select
              type="text"
              placeholder="Repartidor"
              name="deliverer"
              options={deliverersForDropdown}
              search={true}
              onChange={(event, { value }) => {
                setFieldValue("deliverer", value);
                setTouched("deliverer", true);
              }}
              error={errors.deliverer}
              value={values.deliverer}
            />
            <button type="submit" disabled={isSubmitting}>
              SUBMIT
            </button>
          </FormikForm>
        );
      }}
 </Formik>

Live Demo

Alternatively you can use a 3rd party that automatically binds, for example formik-semantic-ui