Estoy usando react-select y tengo la siguiente configuración a continuación, donde al usuario se le proporciona una lista de informes de registros de animales con un botón "Editar" en cada registro donde pueden asignar/eliminar selecciones de animales a través de este cuadro de diálogo de edición emergente editable.

Al ingresar a este cuadro de diálogo emergente, tengo un enlace useEffect que llena mi matriz de animals en función de los registros editados y lo asigna a la propiedad de valor dentro de mi componente de selección de reacción. Esto se muestra correctamente en mi componente de selección de selección de reacción.

En este momento, el usuario puede ver la etiqueta - "Perro".

Al ser una configuración de selección múltiple, mi pregunta es, cuando trato de seleccionar "Gato" y "Pájaro", mi componente de selección de reacción no se actualiza con estos valores y aún solo muestra "Perro".

Mi pregunta es, usando onChange , ¿cómo puedo reflejar las nuevas opciones seleccionadas dentro de mi componente seleccionado ya que en este momento mi función handleChangeIndex no funciona ya que mi registro de consola optionsCopy está vacío?

En este escenario, el resultado final que busco es:

Animales asignados: Dog [x] Cat [x] Bird [x] donde se puede hacer clic en 'x' para eliminar una entrada.

 const options = [ { value: 0, label: "Dog" }, { value: 1, label: 'Cat' }, { value: 2, label: 'Bird' }, { value: 3, label: 'Fish' } ] const [animals, setAnimals] = useState([]); const [selectedOptions, setSelectedOptions] = useState([]); const handleChangeIndex = selectedOption => { const optionsCopy = [...selectedOptions]; console.log("optionsCopy: ", optionsCopy) setSelectedOptions(optionsCopy); }; <Select name="animal_names" options={options} isMulti={true} value={animals} onChange={(selectedOptions) => { handleChangeIndex(selectedOptions); }} />