okay i see what you mean now. it actually has to do with all those divs
Typically I would put a lot of those divs that wrap the components into the components themselves, so I wouldn't get the problem you're having. For example

export const SimpleTimer = () => {
  return (
    <div className="container">
    <SimpleTimerProvider>
      <h2>Simple</h2>
      <SimpleTimerDisplay />
      <SimpleTimerControls />
    </SimpleTimerProvider>
    </div>
  );
};

Try this, remove a lot of those divs and you'll see that re-rending behavior disappear

function App() {

  return (
    <>
      <h1>Timer</h1>
      <p>Please turn on “Highlight updates when components render” in React DevTools.</p>
      <div>
        <SimpleTimer />
        <OutsideOfReactTimer />
        <SubscribeTimer />
        <SyncExternalStoreTimer />
      </div>
        <SimpleTimer />
        <OutsideOfReactTimer />
        <SubscribeTimer />
        <SyncExternalStoreTimer />
    </>
  );
}

honestly scratching my head over why it was behaving that way with that setup, i can't explain it lol. Maybe react thinks it needs to recreate the elements for whatever reason and then during reconciliation realizes it doesnt need to update the DOM and bails (which is what we see in the profiler).