Estoy tratando de crear un menú desplegable de búsqueda que permita a los usuarios seleccionar solo 2 géneros que luego se agregan a genderName. Actualmente lo tengo funcionando pero los valores no se establecerán o todos los valores se establecerán.

Lo tengo funcionando con otro conjunto de código, pero no pude agregar la función de búsqueda para el material ui select.

¿Alguien tiene alguna idea de cómo solucionar esto?

 const genres = [ { value: 'acoustic', label: 'acoustic' }, { value: 'afrobeat', label: 'afrobeat' }, { value: 'alt-rock', label: 'alt-rock' }, { value: 'alternative', label: 'alternative' }, { value: 'brazil', label: 'brazil' }, { value: 'breakbeat', label: 'breakbeat' }, ] const AddGenre = ({ }) => { const [ariaFocusMessage, setAriaFocusMessage] = useState(''); const [isMenuOpen, setIsMenuOpen] = useState(false); const onFocus = ({ focused, isDisabled }) => { const msg = `You are currently focused on option ${focused.label}${isDisabled ? ', disabled' : '' }`; setAriaFocusMessage(msg); return msg; }; const onMenuOpen = () => setIsMenuOpen(true); const onMenuClose = () => setIsMenuOpen(false); //trying to set the values here const [genreName, setGenreName] = useState([]); const handleInputChange = (value, e) => { if (e.action === 'input-change') { setGenreName(value); console.log(genreName) } } return ( <div className="bodyComp"> <form> <label style={style.label} id="aria-label" htmlFor="aria-example-input"> Select a Genre </label> <Select isMulti aria-labelledby="aria-label" ariaLiveMessages={{ onFocus, }} onInputChange={handleInputChange} options={genres} //if I set the value as genres all values are set ? value={genres} inputId="aria-example-input" name="aria-live-color" onMenuOpen={onMenuOpen} onMenuClose={onMenuClose} /> </form> </div> ) }; export default AddGenre