Multiple select dropdown with unique option selection React JS

I have a add button which map multiple select dropdowns. Basically i can keep adding more dropdown as i click add.
Selected values in any dropdown should not appear on the rest of the dropdown list

My map function is as such

{MainForm && MainForm.map((element:any, id:any) =>{
<div key={element.id}>
  <select onChange={()=>{handleSelect(window.event)
}}>
  {optionList.map((element:any, id:any)=> 
    <option>{item}</option>
  </selct>
</div>
)}

handleSelect function

const handleSelect =(event:any)=>{
optionList = optionList.filter(x=> x.name !== event.target.value;

optionList State = [1,2,3,4]

What happens is first dropdown selects "2", but first dropdown selected option will disappear because the array will filter out "2" Whats the correct way to tackle this issue where all dropdown will not have any duplicate selected option but still able to display what they have selected?