Отрисовывается дочерний компонент ProcetedRoute

Я реализовал авторизацию на React. Я хочу, чтобы у пользователя не было возможности перейти на другие страницы приложения без авторизации. Я создал следующий компонент

import { ReactNode } from "react";
import { Navigate } from "react-router-dom";
import { useAuth } from "../hooks/use-auth";

interface ProtectedRouteProps {
    children: ReactNode,
}

export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
    
    const { isAuth } = useAuth();
  
    return !isAuth ? <Navigate to="/login" replace /> : <>{children}</>;
};

Однако при попытке перехода со страницы авторизации на другую страницу, во время обратного редиректа отрисовывается дочерний компонент на несколько миллисекунд. Как это исправить?

<Route 
        path="/kanban" 
        element={
          <ProtectedRoute>
            <KanbanPage/>
          </ProtectedRoute>
        }
 />