I have provider which makes a request to the server to refresh a token and has some values. Also I have a simple layout with a sidebar. I wanna use them only in one route. Idk where to add the layout and I’ve already used Outlet in the provider

Provider:

export const AuthProvider: FC = () => {
  const [isUserLoged, setIsUserLoged] = useState(false)
  const [isAppReady, setIsAppReady] = useState(false)

  useEffect(() => {
    AuthClient.post("/refresh").then((res: AxiosResponse) => {
      const {accessToken, accessTokenExpiration} = res.data;

      inMemoryJWT.setToken(accessToken, accessTokenExpiration)

      setIsAppReady(true)
      setIsUserLoged(true)
    }).catch((err) => {
      setIsAppReady(true)
      toast.error(err.response.data.error)
    })
  }, [])

  useEffect(() => {
    const handlePersistedLogOut = (e: StorageEvent) => {
      if(e.key === config.LOGOUT_STORAGE_KEY) {
        inMemoryJWT.deleteToken()
        setIsUserLoged(false)
      }
    }

    return window.addEventListener("storage", handlePersistedLogOut)
  }, [])

  return (
    <AuthContext.Provider
      value={{
        isAppReady,
        isUserLoged,
      }}
    >

    <Outlet />
    
    </AuthContext.Provider>
  );
};

Routing:

export const Routers: FC = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<AuthProvider />}>
                    <Route path="/home" element={<div>Home</div>} />
                </Route>

                <Route path="/auth" element={<Auth />} />

                <Route path="*" element={<ErrorPage message="Страница не найдена!" status={404} />} />
            </Routes>
        </BrowserRouter>
    )
}