The issue is likely that you’re mutating the array (rather than setting a new array) so React sees the array as the same using shallow equality.
Changing your addOrder
method to assign a new array should fix this issue:
const addToOrder = (idToAdd, quantityToAdd = 1) =>
setProducts([
...products,
{
id: idToAdd,
quantity: quantityToAdd
}
]);