DOM classList.remove 仅在单击两次而不是单击一次后才起作用

Question

我正在开发一个应用程序，我想从一个元素中删除 classList 并将 classList 添加到第二个元素。我所发生的情况是，第二个元素在第一次单击时添加了其 classList，但第一个元素直到第二次单击才删除其 classList。

这是事件处理程序：

const resetCount = () => {
    setCount(initialCount);
    setGrid(initialState);

    const active = document.querySelector(".active");
    active.classList.remove("active");
    const five = document.querySelector(".five");
    five.classList.add("active");
  }

我通过 onClick 将其连接到我的按钮。

正如我所提到的，当我单击按钮时，const 5 会添加类名“active”，但 const active 不会删除类名“active”。当我第二次单击时，cont active 就会删除类名“active”。

由于这两个事件彼此相邻并且在同一函数中，我很困惑为什么删除（“active”）事件仅在第二次单击后才起作用？任何澄清将不胜感激。