I am having problems displaying a child component.
Here is the code I am using inside my App.js

<Route element={<ProtectedRoutes allowedRoles={[userRoles.FIELD_FORCE_MANAGER]} />}>
      <Route
        path="/dashboard-ff"
        element={
          <DashboardWrapper>
            <FieldForceDashboard />
          </DashboardWrapper>
        }
      />
 </Route>

Right now I have the allowed userRole. So my has no issue. But anyway that is the code:

import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useSelector } from "react-redux";
import PropTypes from "prop-types";

const ProtectedRoutes = ({ allowedRoles }) => {
  const { isAuthenticated, userRole } = useSelector((state) => state.auth);

  return isAuthenticated && allowedRoles.includes(userRole) ? <Outlet /> : <Navigate to="/" />;
};

ProtectedRoutes.propTypes = {
  allowedRoles: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default ProtectedRoutes;

Here is the code of my :

return (
    <>
      <Sidenav
        color={sidenavColor}
        brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
        brandName="Pharm"
        routes={routes}
        onMouseEnter={handleOnMouseEnter}
        onMouseLeave={handleOnMouseLeave}
      />
      <Outlet />
    </>
  );

Note my DashboardWrapper is being rendered. The problem is with rendering . Note that is being rendered if I remove in App.js as follows:

<Route element={<ProtectedRoutes allowedRoles={[userRoles.FIELD_FORCE_MANAGER]} />}>
      <Route
        path="/dashboard-ff"
        element={
            <FieldForceDashboard />
        }
      />
    </Route>