48行目で decrementMenu 関数を以下のように実装しています。

  const decrementMenu = (menuId) => {
    const newCounts = [...counts]; // （1）
    newCounts[menuId]--; // （2）
    setCounts(newCounts);
  };

上記では配列 counts のコピーとして newCounts を作ってから（1）、
newCounts 内のクリックされた要素を -1 しています（2）。

ですが、新しく newCounts を作る必要性を感じなかったので、counts の要素に対して直接 -1 して以下のように書いたのですが、うまく動作しませんでした。

  const decrementMenu = (menuId) => {
    counts[menuId]--;
    setCounts(counts);
  };

上記ではダメなことは確認したのですが、なぜ newCounts を作らなければダメなのか理由がわかりません。
何か基本的なことをわかっていない気がするのですが、理由を解説して頂けないでしょうか。