DOM classList.remove only works after two clicks instead of one

I am working on an app where I want to remove a classList from one element and add a classList to a second. What I have happening though is the second element gets its classList added on the first click, but the first element does not get its classList removed until the second click.

Here is the event handler:

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

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

I have this connected to my button via onClick.

As I mentioned, when I click the button the const five gets the class name "active" added, but the const active does not get the class name "active" removed. When I click a second time, the cont active then gets the class name "active" removed.

Since the two event are next to each other and in the same function, I'm confused as to why the remove("active") event only works after the second click? Any clarification would be appreciated.