I have the following code below

const myID = [] //global variable

const tableContents = () = {

const [selectedOptions, setSelectedOptions] = useState([])
const doChange = (selectedOptions) => {
    setSelectedOptions([...selectedOptions])

    for (var i = 0; i < Object.keys(selectedOptions).length; i++) {
      myID[i] = selectedOptions[i].id
    }
  }
}
console.log(myID)

The function doChange is triggered by onChange of a component (Filter button) that has options. Each of the options has an id. What I initially wanted to do is put the id's of the chosen options in an array so that I can pass it as a value of a query. The problem is when I choose multiple options and remove one, the array that displays still includes the id of the deleted option.

For example: Chosen options are option1, option2, option3. When console.log(myID) is executed, 1,2,3 would appear. When I remove option3, the same 1,2,3 would still appear. How do I structure the code wherein when I remove an option, the array displayed will also be updated?