I am using react-select and have the following setup below where a user is provided a report list of animal records with an "Edit" button against each record where they can assign/remove animal selections via this editable popup edit dialog.

On entry to this popup dialog, I have a useEffect hook that populates my animals array based on records edited and assigns this to the value prop within my react-select component. This is then shown correctly in my react-select select component.

At the moment, the user can see the label - "Dog".

Being a multi-select setup, my question is, when I try and select "Cat" and "Bird", my react-select component is not updating with these values and still only shows "Dog".

My question is, using the onChange, how I can reflect the new options selected within my select component as at the moment my handleChangeIndex function is not working as my optionsCopy console log is empty?

In this scenario, the end result that I am after is:

Animals assigned: Dog [x] Cat [x] Bird [x] where 'x' can be clicked to remove an entry.

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);
  }}                                              
/>