Page still gets rendered by outlet even though path does not match

I'm trying to do some permissions-based routing in the React side instead of the beforeLoad, because I wanted to avoid a blank page while my initial beforeLoad that verified the auth was resolving the api query. I've got a setup but its giving me some issues. When I reload my page to /about, although I've got the <Navigate/> setup and the path changes to the redirect path, my outlet still renders the component briefly from the path that should not be accessed. I believe it could be due to accessing useRouterState to get the current path, but not sure why. https://codesandbox.io/p/devbox/friendly-shape-f5mdcr?file=/src/main.tsx:27,1 Sidenote: Im still seeing multiple re-renders of my root components down, while navigating, and while clicking Links to the same route.