React component rendering even when there is no change in the state value

From the React Docs, what I have learnt is that the component will re-render only if there is a change in the value of a state.

For instance

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  console.log("I am rendering");

  const handleButtonClick = () => {
    setCount(0);
  };
  return (
    <>
      <button onClick={handleButtonClick}>Increment</button>
      Count value is: {count}
    </>
  );
}

The message I am rendering is printed only once even if we click the button because the setCount function is setting the value to 0 which is the present value of count

Since there is no change in the present and future value therefore, the Component does not re-render.

Unexpected Behaviour

However, the similar behaviour is not observed when we add an extra line setCount(1) before setCount(0)

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  console.log("I am rendering");

  const handleButtonClick = () => {
    setCount(1); //this line has been added extra
    setCount(0);
  };
  return (
    <>
      <button onClick={handleButtonClick}>Increment</button>
      Count value is: {count}
    </>
  );
}

In principle, there is no change in the output of the final count value. However, if we click the button, the component re-renders and prints the message I am rendering

---

I could not find an explanation for this behaviour. Is this behaviour on expected lines?.

Shouldn’t the component re-render only when the final value of the state is different from the current value ?