React hooks not updating components

I’m trying to set up an order list with react hooks. The method is correct but the components aren’t updating until i force it from React dev tools. The button that add the order is in a component and the list is a different component.

I tried setting useEffect but the result is the same.

Here is the state declaration and the method

const [orderList, setOrderList] = React.useState([]);

const addToOrderList = (order) => {
    const list = orderList;
    if (list)

And here the components in the render

<div className="w-3/5">
    onClickHandler={(order) => addToOrderList(order)}
<div >
  <DeliveryCard orderListProp={orderList} />

The button in ItemDeliveryCard

   onClick={() => onClickHandler(product)}
   className={gradients.redGradToL + " w-80 flex flex-row items-center justify-center mb-5"}
   <p className="uppercase">select this offer</p>

I tried the solutions from this post but useEffect doesn’t seems to work


You are mutating state where you need to treat it as immutable, try instead:

const addToOrderList = (order) => {
  if (orderList) {
    setOrderList(prevList => [...prevList, order]);