React Hooks - having trouble with splice updating state during onClick event

SANDBOX DEMO

Here is the snippet of my code that's running. When I console.log it looks fine, but for some reason it won't set the state. When clicking a box it should delete by using splice. I know there's a basic reason why it's failing but I can't seem to grasp it.

  const handleClick = (index) => {
    const newBoxOrder = order;
    newBoxOrder.splice(index, 1);
    const newState = newBoxOrder;
    console.log(newState);
    setOrder(newState);
  };