React Testing Library fireEvent.click() not Working

Question

I have a component that updates the State on Button CLick, it works fine in the UI but causes my test to fail

This is the initial state and the eventHandler.

  const [states, setMyStates] = useState("i Havent Clicked");

  const changeVal = () => {
    setMyStates("NOW CLICKED");
  };

This is the BUTTON component that updates the state

  return(
      <button
            onClick={changeVal}
            data-testid="Nav-Slider"
            title="dummyButton"
          >
            {states}
       </button>
  )

This is the Test Query and Test Case

import { render, screen, fireEvent, prettyDOM } from "@testing-library/react";

describe("Nav Menu Slide Tester", () => {
  const btn = render(<Header />).queryByTitle("dummyButton");

  it("test Slide Interactive", () => {
    // After This Click The State Should Update to "NOW CLICKED"
    fireEvent.click(btn);
    expect(btn.innerHTML).toBe("NOW CLICKED");
  });
});

This is FAILED CASE:

  ● Nav Menu Slide Tester › test Slide Interactive

    expect(received).toBe(expected) // Object.is equality

    Expected: "NOW CLICKED"
    Received: "i Havent Clicked"

      45 |     console.log(prettyDOM(btn));
      46 |     // expect(nav).toHaveStyle("height: 100vh");
    > 47 |     expect(btn.innerHTML).toBe("NOW CLICKED");
         |                           ^
      48 |   });
      49 | });