Javascript 使用导航时，路径的所有子组件都必须是路径

我有一个简单的Reaction项目和下一个组件层次 struct :

主要组件(这里我称为路由服务并在路径中呈现组件):

const App: React.FC = () => {
    return <BaseLayout>{RoutingService.getRoutes()}</BaseLayout>;
}

export default App;

路由服务代码:

class RoutingService {
    static getRoutes = (): React.ReactNode => {
        return (
            <Routes>
                <Route key={makeRandomKey()} path={PATHS.ROOT_PATH} element={<MainPage/>}/>
                <Route key={makeRandomKey()} path={PATHS.AUTH_PATH} element={<LoginPage/>}/>
                <Route key={makeRandomKey()} path={PATHS.NOT_FOUND_PATH} element={<UnderConstructPage/>}/>
                <ProtectedRoute path={PATHS.SEARCH_HISTORY_PATH} element={<SearchHistoryPage/>}/>
                <ProtectedRoute path={PATHS.USER_CABINET_PATH} element={<UserCabinetPage/>}/>
            </Routes>
        );
    };
}

export default RoutingService;

所以我想执行-有一些开放的路由(页面)为所有用户(已登录和未登录)，如主页面，未找到和身份验证页面. 但我有一些页面需要限制非登录用户的访问.为此，我创建了ProtectedRouting组件，当用户未登录并try 访问需要登录的页面时，该组件应将用户重定向到身份验证页面.

interface ProtectedRouteProps {
    path: string;
    element: React.ReactNode;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({path, element}) => {
    const isAuthenticated: boolean = useSelector((state: RootState) => !!state.user.userData?.auth?.token);

    return isAuthenticated ?
        <Route path={path} element={element}/> : <> <Navigate to="/auth" replace/></> ;
};

export default ProtectedRoute;

不幸的是，我得到了错误:

router.ts:5 Uncaught Error: [ProtectedRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (router.ts:5:1)

ProtectedRoute个组件中似乎有<Navigate>个组件引发了此错误，但我不知道如何正确实现此重定向.如何解决这个问题？