Issue where navigation does not work during startTransition()

[martin-jang]

I wrote the following code, and when I press the Start button, startTransition() works.
However, if I try to navigate to another page by pressing the go to hello button during this process, it is stuck.
It waits until startTransition() is completed and then navigates.

Is this working correctly?

packages :
react 19
react-router 7.3.0
react-dom 19

// Home.tsx

import {useState, useTransition} from 'react'
import './App.css'
import {useNavigate} from "react-router";

function Home() {
    const [count, setCount] = useState(0)
    const [isPending, startTransition] = useTransition();
    const navigate = useNavigate();

    const handleClickStart = () => {
        startTransition(async () => {
            await new Promise((resolve) => setTimeout(resolve, 10000));
            startTransition(() => {
                setCount(2)
            })
        })
    }
    const handleClickGoToHello = () => {
        navigate('/hello')
    }

    return (
        <div>
            <div>count : {count}</div>
            <button onClick={handleClickStart}>start transition</button>
            <button onClick={handleClickGoToHello}>go to hello</button>
        </div>
    )
}

export default Home

// App.tsx

import './App.css'
import {Route, Routes} from "react-router";
import Home from "./Home.tsx";
import Hello from "./Hello.tsx";

function App() {
    return (
        <div>
            <Routes>
                <Route index element={<Home/>}/>
                <Route path="hello" element={<Hello/>}/>
            </Routes>
        </div>
    )
}

export default App