Estoy trabajando en un componente de mi aplicación de reacción que permite a los usuarios seleccionar varios alimentos en una lista desplegable. Tengo un problema en el que el primer alimento que selecciono se registra como una matriz vacía, por lo que cada alimento que selecciono después se retrasa en un alimento. Por ejemplo, supongamos que el primer alimento que selecciono del menú desplegable es "Papas fritas", luego console.log (alimentos) registrará una matriz vacía. Si el segundo elemento que selecciono es "Hamburguesas", la consola registrará [Papas fritas]. Si el tercer elemento que selecciono es "Ensalada", la consola registrará [Papas fritas, Hamburguesas]. ¡Estoy bastante atascado, así que cualquier ayuda sería apreciada!

Aquí es donde se llama a la función de cambio de identificador en el menú desplegable:

 <Select className={classes.dropDownMenu} options={listItems} onChange={value => handleChange(value)} />

Esta es mi función para manejar el cambio en el menú desplegable:

 const [foods, setFoods] = React.useState([]) const handleChange = value => { setFoods(prev => [...prev, value]) console.log(foods) }