un problema un poco extraño, tengo una acción que actualiza el estado, pero este estado solo se actualiza cuando se hace clic en el botón por segunda vez.

 function addComponent(component: Component) { setSelectedComponents(oldArray => [...oldArray, component]) console.log(selectedComponents) }

esto se llama al hacer clic en un botón

 {components.map((component) => ( <div key={component.name} onClick={() => addComponent(component)} className="collapse w-96 border rounded-box border-base-300 collapse-plus my-2"> </div> ))}

console.logging el resultado muestra que, en el primer clic, todavía es una matriz vacía y al hacer clic en el botón nuevamente se muestra el objeto dentro de la matriz.

¿Alguna idea de lo que está pasando aquí? Esto me está volviendo loca.