should not useTransition be non-blocking?

Question

I am practicing wiith useTransition() and I've seen a lot of examples, but not enough. What I've seen is that useTransition() should be non-blocking. But In this case is not working.

I've tried this code. It works but is blocking. After the page load, when I start typing in the input field, ... UI is blocked for a while and I do not understand why. What I was expecting is to continue typing without interruptions.

import { useTransition, useState } from "react"

const InputField = () => {
  const [items, setItems] = useState([])
  const [isPending, startTransition] = useTransition()
  
  const changeHandler = () => {
    startTransition(() => {
      const newItems = Array.from({ length: 8000 }, (_, index) => {
        return <div key={index}>{index}</div>
      })
      
      setItems(newItems)
    })
  }

  return <>
    <input onChange={changeHandler} />
    {isPending ? 'loading ...' : ''}
    {items.map((index, item) => {
      return <li key={item}>{index}</li>
    })}
  </>
}

const App=()=> { 
    return ( 
        <>
      <InputField />
    </> 
    ); 
} 

export default App; 

Could someone explain me what I am making wrong or what I am not understanding in useTransition()?