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)
      list.push(order);
    setOrderList(list);
  }

And here the components in the render

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

The button in ItemDeliveryCard

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

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

Answer

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

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