I am trying to create a searchable dropdown that allows users to select only 2 genres which are then added to genreName. I currently have it working but the values will not set or all the values set ?

I have it working with another set of code but I couldn't add the search feature for the material ui select.

Anyone have any idea how to fix this ?

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