Lo primero que me viene a la mente es crear un envoltorio para jugar con los accesorios de ReactSelect . Entonces puede verificar si está enfocado o no y limitar la cantidad de opciones que le pasan como valor, etc.

 import ReactSelect, { components } from "react-select"; import { useState } from "react"; // sample options const options = [ { value: "chocolate", label: "Chocolate" }, { value: "strawberry", label: "Strawberry" }, { value: "vanilla", label: "Vanilla" }, { value: "apple", label: "Apple" }, { value: "banaba", label: "Banana" }, { value: "biscuit", label: "Biscuit" } ]; // more option blueprint! const moreOption = { value: "__more__" }; export function Select({ limitTags, ...rest }) { const [selected, setSelected] = useState([]); const [focused, setFocused] = useState(false); const moreCount = selected.length - limitTags; const limitSelected = limitTags > 0 && !focused && moreCount > 0; // if value should be limited to `limitTags` // will cut them and add a tag showing how many tags are hidden const visibleSelected = limitSelected ? [ ...selected.slice(0, limitTags), { ...moreOption, label: `+${moreCount}` } ] : selected; const handleChange = (options) => { setSelected(options); }; return ( <ReactSelect {...rest} value={visibleSelected} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} onChange={handleChange} components={{ // remove `MultiValueRemove` if option is more! MultiValueRemove: (props) => props.data.value === moreOption.value ? null : ( <components.MultiValueRemove {...props} /> ) }} /> ); } export default function App() { return ( <div className="App"> <Select limitTags={2} options={options} isMulti /> </div> ); }

¡Aviso!

• Tal vez necesite personalizarlo y trabajar en cosas de rendimiento.
• visibleSelected puede contener más opciones, así que no lo use para obtener las opciones seleccionadas. Use selected en su lugar.

Aquí está el código en CodeSandbox . Espero que te ayude.

Buena suerte.