Why is my component being rendered again if I pass the previous state value in the setState method?

Question

I am trying to understand the useState hook in React. When the below component renders for the first time, it prints 0. When I click Button2, it prints 1. Now, when I click button1, after pressing button2, why is the App component being rendered again even though I am passing the same value? However when I click the button2 again, the component is not re-rendered again.

<script type="text/babel" defer>
const {useState} = React;

function App() {
  const [val, setVal] = useState(0);
  console.log(val);
  const clickHandler1 = () => {
    setVal((prevState) => prevState);
  }
  const clickHandler2 = () => {
    setVal((prevState) => prevState + 1);
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>
      <button onClick={clickHandler1}>Button 1</button>
      <button onClick={clickHandler2}>Button 2</button>
    </div>
  );
}

ReactDOM.render(<App />, document.body);

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>