bit of an odd issue, I have an action that updates the state, but this state is only updated when the button is clicked a second time.

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

        console.log(selectedComponents)
    }

this is called when clicking on a button

    {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 the result shows that, on the first click it's still an empty array and clicking the button again shows the object inside of the array.

any idea what's going on here? this is driving me crazy.