Unable to limit the selections of items to 2 in react hooks - reactjs

Question

In my React-hooks I am unable to limit my selections of items to 2, below code is not validating at the moment. Would like to display a validation message "Maximum items has been selected". What could be the reason ?
https://codesandbox.io/s/kind-brown-n8ki4?file=/src/App.js:463-492
import React, { useRef, useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import Multiselect from "multiselect-react-dropdown";
const options = [
{ key: "Apple", id: 1 },
{ key: "Bags", id: 2 },
{ key: "Coat", id: 3 },
{ key: "Drum", id: 4 }
];
const App = () => {
const maxOptions = 2;
const [selectedOption, setSelectedOption] = useState([]);
const handleTypeSelect = (e) => {
setSelectedOption(e);
};
const onNominate = () => {
alert("hello");
// ...
};
return (
<div className="App">
<div className="navbar-nav">
<div className="leftNavItem"></div>
</div>
<h1>Maximum 2 selections</h1>
<div className="nomineeSelectBox">
<Multiselect
onChange={handleTypeSelect}
options={selectedOption.length === maxOptions ? [] : options}
displayValue="key"
showCheckbox={true}
noOptionsMessage={() => {
return selectedOption.length === maxOptions
? "You have reached the max options value"
: "No options available";
}}
/>
</div>
<div className="nominateButton">
<input type="button" value="Next" onClick={onNominate} />
</div>
</div>
);
};
export default App;

Answer 1

You have some problems in your code to Multiselect works properly:
You need onSelect event of the multiselect-react-dropdown component not onChange.
selectedOption.length === maxOptions ? [] should change to selectedOption.length + 1 === maxOptions ? []
For showing the correct message for the no options selected, you need to change noOptionsMessage to emptyRecordMsg
So, final result should be:
<Multiselect
onSelect={handleTypeSelect}
onRemove={handleTypeRemove}
// onChange={handleTypeSelect}
options={selectedOption.length + 1 === maxOptions ? [] : options}
displayValue="key"
showCheckbox={true}
emptyRecordMsg={"You have reached the max options value"}
/>
In addition you should change the handleTypeSelect to :
const handleTypeSelect = (e) => {
const copy = [...selectedOption];
copy.push(e);
setSelectedOption(copy);
};
Also you need to handle the multiselect when a item removes with onRemove method:
const handleTypeRemove = (e) => {
const copy = [...selectedOption];
let index = copy.indexOf(e);
copy.splice(index, 1);
setSelectedOption(copy);
};

Answer 2

You are always setting only one option. So you have always one option selected. What you need to do is
const handleTypeSelect = (e) => {
setSelectedOption(prevArr => [...prevArr, e]); };
Do it like this so you can pull the option selected before.