[Bug]: useBlocker in createBrowserRouter is not working

[iulovelove]

What version of React Router are you using?

6.22.3

Steps to Reproduce

I create some routes with createBrowserRouter()

Example code like this :

const LazyAuthDenied = React.lazy(() => import('./gateway/view/AuthDenied'))
const LazyAuthSuccess = React.lazy(() => import('./gateway/view/AuthSuccess'))


const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/' element={<DefaultLayout/>}>
      <Route 
        index 
        element={<SecuredRoute requiredScopes={[UTILIZATION_VIEW_SCOPE]}><UtilizationView/></SecuredRoute>}
      />
      <Route 
        path='routes' 
        element={<SecuredRoute requiredScopes={[UTILIZATION_VIEW_SCOPE]}><RoutesView/></SecuredRoute>}
      />
      <Route 
        path='preDefine'
        element={<SecuredRoute requiredScopes={[UTILIZATION_VIEW_SCOPE]}><PreDefinedView/></SecuredRoute>}
      />
      <Route 
        path='template/*'
        element={<SecuredRoute requiredScopes={[TEMPLATE_VIEW_SCOPE ]}><TemplateAppRouter/></SecuredRoute>}
      />
      <Route 
        path='auth/denied'
        element={<LazyAuthDenied/>}
      />
      <Route 
        path='auth/success'
        element={<SecuredRoute><LazyAuthSuccess/></SecuredRoute>}
      />
      <Route 
        path='error'
        element={<ErrorPage/>}
      />
      <Route 
        path='*'
        element={<ErrorPageNotFound/>}
      />
    </Route>
  )
)

const AppRouter: React.FC = () => {
  const fallbackComponent = <LoadingMask show={true} />

  return (
    <Suspense fallback={fallbackComponent}>
      <RouterProvider router={router} />
    </Suspense>
  )
}

export default AppRouter

And I wrapped useBlock in a useUnSavedChangesWarning hook, the hook like this:

const useUnSavedChangesWarning = ({
    hasUnSavedChanged,
    onOk,
    onCancel,
    message = 'There are unsaved changes. Are you sure to leave without saving?'
} : unSavedChangesProp) => {
  let blocker = useBlocker(hasUnSavedChanged)

  const handleBeforeUnload = (event: BeforeUnloadEvent) => {  
    event.preventDefault() 
    event.returnValue = message
  }  

  useEffect(() => {  
    if (hasUnSavedChanged) {
      window.addEventListener('beforeunload', handleBeforeUnload)
    }
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload)
    }
  }, [hasUnSavedChanged])  


  useEffect(() => {
    if(blocker.state === 'blocked'){
      if(window.confirm(message)) {
        onOk?.()
        blocker!.proceed()
      }else{
        onCancel?.()
        blocker!.reset()
      }
    }
  }, [blocker])
}

export default useUnSavedChangesWarning

then I use useUnSavedChangesWarning hook in DefaultLayout

useUnSavedChangesWarning({hasUnSavedChanged: hasUnsavedChanges,onOk:()=>{defaultLayoutModal.onOk?.()}})

However, when I run this code I get Error handled by React Router default ErrorBoundary: Error..
If I remove the useBlocker in the custom hook then the app will work fine

Expected Behavior

Hopefully useBlocker works

Actual Behavior

application running exception