REACT: react-select with Formik for Single and Multi Selections

First install the package: npm i react-select

react-select-> Costum Component file: MultiSelect.js

import Select from 'react-select';

const MultiSelect = ({
    field,
    form,
    options,
    isMulti = false,
    placeholder = 'Select'
}) => {
    function onChange(option) {
        form.setFieldValue(
            field.name,
            option ? (option).map((item) => item.value) : [],
        );
    }

    const getValue = () => {
        if (options) {
            return isMulti
                ? options.filter((option) => field.value.indexOf(option.value) >= 0)
                : options.find((option) => option.value === field.value);
        } else {
            return isMulti ? [] : ('');
        }
    };

    if (!isMulti) {
        return (
            <Select
                options={options}
                name={field.name}
                value={options ? options.find(option => option.value === field.value) : ''}
                onChange={(option) => form.setFieldValue(field.name, option.value)}
                onBlur={field.onBlur}
                placeholder={placeholder}
            />
        )
    } else {
        return (
            <Select
                className="react-select-container"
                classNamePrefix="react-select"
                name={field.name}
                value={getValue()}
                onChange={onChange}
                options={options}
                isMulti={true}
                placeholder={placeholder}
            />
        )
    }
}

export default MultiSelect;

usage Formik

for Single Selection

<Field
    name="singleSelectCustom"
    id="singleSelectCustom"
    placeholder="Single Select"
    isMulti={false}
    component={MultiSelect}
    options={[
        { value: 'one', label: 'One' },
        { value: 'two', label: 'Two' },
        { value: 'three', label: 'Three' },
    ]}
/>

for Multi Selection

<Field
    name="multiSelectCustom"
    id="multiSelectCustom"
    placeholder="Multi Select"
    isMulti={true}
    component={MultiSelect}
    options={[
        { value: 'one', label: 'One' },
        { value: 'two', label: 'Two' },
        { value: 'three', label: 'Three' },
    ]}
/>