react-router 的 data API 问题求教

最近想摸一个简单的管理后台页面，前端登录这块一开始是参考的 react-router 官方的一个示例

想要实现一个如果请求 statusCode 是 4xx 的话就重新跳转到登录页的功能，考虑使用 react-router 的errorElement捕获 error 实现，为此需要使用 v6.4 加入的 createBrowserRouter 来创建路由，把官方示例中 App.tsx 路由申明部分改成了这样：

const router = createBrowserRouter(
    createRoutesFromElements(
      <Route element={<Layout />}>
        <Route path="/" element={<PublicPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route
          path="/protected"
          element={
            <RequireAuth>
              <ProtectedPage />
            </RequireAuth>
          }
        />
      </Route>
    )
  );
  
 return (
   <AuthProvider>
     <RouterProvider router={router} />
   <AuthProvider/>
 );

并去掉了 main.tsx 中的 <BrowserRouter><BrowserRouter/>

随后运行示例就发现了一个诡异的问题：

登录第一次成功后它不能跳转到 /protected 下，原因是被 RequireAuth 组件给拦住了，跳转回了 /login ，需要点两次登录才能顺利跳转，可是明明在 signin 的回调中 setUser(newUser) 了，这个现象在原本用了 <BrowserRouter> 的示例中没有出现，一使用 createBrowserRouter 就会这样。

翻了两天文档还是毫无头绪，望前端大佬不吝赐教。