Why does React rerender when the state is set to the same value via an onClick event?

I have what I thought would be a simple test to prove state changes, I have another test which does the change by timer and it worked correctly (at least I am assuming so) but this one is trigged by a click event and it’s failing my rerender check.

  it("should not rerender when setting state to the same value via click", async () => {
    const callback = jest.fn();
    const baz = "baz";
    function MyComponent() {
      const [foo, setFoo] = useState("bar");
      callback();
      return (<div>
        <div data-testid="set1" onClick={() => { setFoo(baz); }} >FF</div>
        <div data-testid="test">{foo}</div>
      </div>)
    }

    const { getByTestId } = render(<MyComponent />)
    const testElement = getByTestId("test");
    const set1 = getByTestId("set1");
    expect(testElement.textContent).toEqual("bar");
    expect(callback).toBeCalledTimes(1)

    fireEvent.click(set1);
    await waitFor(() => expect(testElement.textContent).toEqual("baz"));
    expect(callback).toBeCalledTimes(2)

    fireEvent.click(set1);
    await waitFor(() => expect(testElement.textContent).toEqual("baz"));
    expect(callback).toBeCalledTimes(2) // getting 3 here.

  })