Unexpected double redirect react Router v6 - react-router

Question

I am using react-router V6 for navigation and noticed strange behavior in navigation.
When you go to a new page, the following happens: go to the desired page, redirect back and again to the desired page.
This is not the first time I have used this version, but this is the first time I meet this behavior.
did anyone face a similar problem?
My routes.ts
const routes = (isLogged: boolean, dispatch: AppDispatch) => {
if (!localStorage.getItem('auth')) {
<Navigate to="/login" />;
revokeUserInfo(dispatch);
}
const revoke = () => {
if (isLogged && isAuthExpired()) {
revokeUserInfo(dispatch);
}
return false;
};
revoke();
return [
{
path: 'app',
element: isLogged ? <DashboardLayout /> : <Navigate to="/login" />,
children: [
{
path: 'dashboard',
element: <Dashboard />
},
{
path: 'chargers',
element: <Outlet />,
children: [
{
path: '',
element: <Chargers />
},
{
path: ':id',
element: <ChargerInfo />
},
]
},
{
path: 'location/:id',
element: <LocationInfo />
},
{
path: 'activity',
element: <Outlet />,
children: [
{
path: 'sessions',
element: <Sessions />
},
{
path: 'transactions',
element: <Transactions />
},
],
},
{
path: 'business',
element: <Outlet />,
children: [
{
path: '',
element: <Business />
},
{
path: ':id',
element: <BusinessInfo />
},
]
},
{
path: '*',
element: <Navigate to="/404" />
}
]
},
{
path: '/',
element: !isLogged ? <MainLayout /> : <Navigate to="/app/dashboard" />,
children: [
{
path: 'login',
element: <Login />
},
{
path: '/',
element: <Navigate to="login" />
},
{
path: 'resetPassword',
element: <ResetPassword />
},
{
path: '404',
element: <NotFound />
},
]
},
{
path: '*',
element: <Navigate to="/404" />
}
];
};
export default routes;
My App.tsx
const App: FC = () => {
const { isLogged } = useSelector((state: RootStateType) => state.auth);
const dispatch = useDispatch();
const routing = useRoutes(routes(isLogged, dispatch));
return (
<PersistGate
loading={<Spinner />}
persistor={persistor}
>
{/* Permissions Casl Context */}
<AbilityContext.Provider value={ability}>
{/* Material UI theme context Context */}
<StylesProvider
generateClassName={generateClassName}
injectFirst
>
<ThemeProvider theme={theme}>
<LocalizationProvider dateAdapter={DayJsUtils}>
{/* React-intl provider */}
<AppIntlProvider>
<CssBaseline />
<GlobalStyles />
{useScrollTop()}
<ToastContainer />
{routing}
</AppIntlProvider>
</LocalizationProvider>
</ThemeProvider>
</StylesProvider>
</AbilityContext.Provider>
</PersistGate>
);
};
export default App;
My DashboardLayout
const DashboardLayout: FC = () => {
const [isMobileNavOpen, setMobileNavOpen] = useState<boolean>(true);
const classes = useStyles();
const onMobileToggle = () => {
setMobileNavOpen(!isMobileNavOpen);
};
const onMobileOpen = () => {
setMobileNavOpen(true);
};
return (
<Box className={classes.root}>
<DashboardSidebar
onMobileToggle={onMobileToggle}
openMobile={isMobileNavOpen}
onMobileOpen={onMobileOpen}
/>
<Box className={classes.wrapper}>
<DashboardNavbar />
<Box className={classes.container}>
<Container
maxWidth="xl"
className={classes.content}
>
<Outlet />
</Container>
</Box>
</Box>
</Box>
);
};
export default DashboardLayout;