Using Multiselect in Formik about react-responsive-select HOT 3 CLOSED

import * as React from 'react'
import { Select, CaretIcon, ErrorIcon } from 'react-responsive-select-next';
import { Formik, Form, Field, FieldProps, useFormikContext, useField } from 'formik'
import { FormFeedback, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText, Label } from "reactstrap";
import "react-responsive-select-next/dist/react-responsive-select.css";
import { compareArray } from '../utils/SyncUtils';

const RRSMultiInput = ({
    // field, // { name, value, onChange, onBlur }
    iconOrText,
    // form: { touched, errors, setFieldValue, values, handleBlur }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
    ...props
}) => {
    const { options, isRequired = false, label, showLabel = false, isMulti = false } = props
    const [field, meta] = useField(props);
    const { values, errors, touched, setFieldValue, handleBlur } = useFormikContext();
    const icon = iconOrText ?? ""
    let error = errors[field.name];
    let touch = touched[field.name];
    let currentValue = values[field.name];

    return (
        <FormGroup>
            {showLabel ? <Label for={props.id || props.name} className={props.labelColor}>{label}</Label> : ""}
          
            <Select
                {...field}
                {...props}
                options={options}
                selectedValues={values[field.name]}
                multiselect
               
                // caretIcon={<CaretIcon key={`${field.name}-caret`} />}
                caretIcon={<CaretIcon />}
                key={`${field.name}-rrs-multi`}
                onChange={({ options }) => {
                    if (props.onSelectChange) {
                        props.onSelectChange(options)
                    }
                    if (options.length) {
                      
                        const name = options[0].name;
                        const value = options.map(x => x.value);
                          if (compareArray(values[field.name], value) == false)
                          {
                            setFieldValue(name, value);
                          }
                    }
                    else {
                        setFieldValue(field.name, [])
                    }
                }}
                onBlur={({ options }) => {
                    if (options.length) {
                      
                        const name = options[0].name;
                       const value = options.map(x => x.value);
                          if (compareArray(values[field.name], value) == false)
                          {
                            handleBlur({ target: { value, name } });
                          }
                    }
                   
                }}
           
            />

           
            {touched[field.name] && errors[field.name] && (
                <div className="error text-danger">&nbsp;<ErrorIcon /> {errors[field.name]}</div>
            )}
            {error && <FormFeedback>{error}</FormFeedback>}
        </FormGroup>
    )
}

export default RRSMultiInput