javascript – React js React.startTransition still blocks UI

I am trying to learn React.startTransition.

I am trying to render a Tab component , (tab 1,2,3,4)
each with loop 1 000 000 000* count ,
but when i switch tab it still blocks UI

am I missing something?

import React, { Suspense, useState } from 'react';
import ReactDOM from 'react-dom/client';

function Tab({ count }) {
  let e = 0;
  for (let i = 0; i < 1000000000 * count; i++) {
    e = i;
  }
  return <div>{count} {e}</div>
}

function MyComponent() {
  const tabs = [1, 2, 3, 4];
  const [currentTab, setTab] = useState(1);
  const changeTab = (z) => {
    React.startTransition((s) => { //this still blocks UI :( 
      setTab(z)
    })
  }
  return (
    <div>
      {tabs.map((z, i) => <React.Fragment key={i}> <button onClick={() => changeTab(z)}>{z}</button>|--|</React.Fragment>)}
      <Suspense fallback={<div>Loading...</div>}>
        <Tab count={currentTab} />
      </Suspense>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(<MyComponent />);