Why is this component rerendering?

I’m was trying to ensure my knowledge of how React compares states and rerenders components and I’ve struggled to understand why this behaviour takes place:
I have simple component with two buttons and two state variables. Increment button is for incrementing counter, and Re-render button for triggering rerender. Counter state is an object with value property, which is an actual numeric counter. Trigger is just a boolean, which value is not used anywhere. Increment state update is done intentionally wrong just to check how the state is compared.

function App() {
  const [counter, setCounter] = useState({
    value: 0,
  })
  const [trigger, setTrigger] = useState(false)
  console.log('Rendered ', Date.now())
  console.log('State: ', {counter, trigger})
  return (
    <>
      <h1>Object State</h1>
      <p>Counter: {counter.value}</p>
      <button onClick={() => {
        counter.value++
        setCounter(counter)
      }}> Increment</button>
      <button onClick={() => {
        setTrigger(!trigger)
      }}> Re-render</button>
    </>
  )
}

Clicking Increment does nothing as expected. When I click Re-render button, component is rerendered as expected and current counter value is shown. At this point all works as expected. But if after clicking Re-render, I click Increment, I see in console that the component was invoked, although displayed counter value wasn’t updated. It seems like the output is discarded. Clicking Increment after that does not have any effect and the component is not invoked. Why this unexpected invoke is happening and why it’s happening only once util next Re-render click?

I expect component to never invoke on Increment click. Actually it’s being invoked once on Increment click after Re-render click.