Below is my React code:

import { useState } from 'react'

function Child() {
  console.log(2)
  return <p>Child Component</p>
}

function App() {
  console.log(1)
  const [count, setCount] = useState(0)

  return (
    <div>
      <button
        onClick={() => {
          console.log('click')
          setCount(1)
        }}
      >
        Click Me
      </button>
      <p>Count: {count}</p>
      <Child />
    </div>
  )
}

export default App

The first time you click the button, the console outputs click 1 2;

The second time you click it, the console outputs click 1;

The third and subsequent clicks, the console outputs click.

So why does it behave like this?