Tengo el siguiente código a continuación

 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)

La función doChange se activa mediante onChange de un componente (botón Filtro) que tiene opciones. Cada una de las opciones tiene un id . Lo que inicialmente quería hacer es poner las id's de las opciones elegidas en una matriz para poder pasarlas como un valor de una consulta. El problema es que cuando elijo varias opciones y elimino una, la matriz que se muestra aún incluye la identificación de la opción eliminada.

Por ejemplo: Las opciones elegidas son option1 , option2 , option3 . Cuando se ejecuta console.log(myID) , aparecería 1,2,3 . Cuando option3 la opción 3, seguirá apareciendo el mismo 1,2,3 . ¿Cómo estructuro el código en el que cuando elimino una opción, la matriz que se muestra también se actualizará?