Vitest and custom hook that utilizes useNavigate() & useParams() in React

Question

So I have this custom hook (useNavigation), which stores current navigation state for specific page.

const initialState: NavState = {
  searchQuery: undefined,
  dishID: undefined,
  categoryID: 0,
  displayType: "grid",
};

It has useEffect that reads clients URL, and interprets the URL into state. (If url has param /search/something => set states searchQuery to something)

It returns the state, and has functions such as setSearchQuery to update the URL (add /search/ in setSearchQuery case).

It does the job in the browser, but I am having an issue when I am trying to test it.

I am trying to test when "SelectedCategory" button get's clicked, that previous category "TestCategory" doesnt have "selected" class, and the new category "SelectedCategory" has selected class.

This is my test code:

  it("dish list and URL updates on different category click", async () => {
    const user = userEvent.setup();
    await user.click(screen.getByText("SelectedCategory"));
    expect(window.location.href).toContain("/category/grid/1"); // This test passes

   await waitFor(() => {
      expect(
        screen
          .getByText("TestCategory")
          .parentElement?.className.includes("selected")
      ).toBe(false); // Old category is not highlighted -- This test does NOT pass.
    });
  });
});

According to the output, the category-buttons "selected" part does not get updated for some reason.

It appears as if component is not re-rendering the updates, while the URL get's updated.

I have tried adding timeouts and whatnot. Tried mocking the useNavigate and replacing the category in it's state directly - the html output remains the same.

Please keep in mind that I am very new to testing, and might be missing something crucial here, but any help would be greatly appreciated.