كيفية التعامل مع route له مستويات كثيرة في react

مرحبا لدي route بهذه الطريقة 

const ROUTES = [

  {
    path: '/Prospection',
    key: 'Prospection',
    component: RenderRoutes,
    routes: [
      {
        path: '/Prospection/OfferEmploi',
        key: "Offre d'emploi",
        exact: true,
        parent: 'Prospection',
        breadcrumbName: "offre d'emploi",
        component: () => <OfferEmploi />,
      },
      {
        path: '/Prospection/ConsulterOfferEmploi',
        key: "Consulter une offre d'emploi ",
        exact: true,
        parent: 'Prospection',
        breadcrumbName: "consulter une offre d'emploi ",
        component: () => <ConsulterOfferEmploi />,
      },
    ],
  },

  {
    path: '/Configuration',
    key: 'Configuration',
    nosidebar: false,

    component: RenderRoutes,
    routes: [
      {
        path: '/Configuration/Administration',
        key: 'Administration',
        exact: true,
        parent: 'Configuration',
        breadcrumbName: 'Administration',
        component: RenderRoutes,
        routes: [
          {
            path: '/Configuration/Administration/Utilisateurs',
            key: 'Comptes Utilisateurs',
            parent: 'Configuration',
            breadcrumbName: 'Comptes Utilisateurs',
            // exact: true,
            component: () => <Utilisateurs />,
          },
          {
            path: '/Configuration/Administration/Profils',
            key: 'Rôles',
            parent: 'Configuration',
            breadcrumbName: 'Rôles',
            exact: true,
            component: () => <Profiles />,
          },
          {
            path: '/Configuration/Administration/Fonctionnalites',
            key: 'Fonctionnalités',
            parent: 'Configuration',
            breadcrumbName: 'Fonctionnalités',
            exact: true,
            component: () => <Features />,
          },
        ],
      },
      {
        path: '/Configuration/référentiel',
        key: 'Référentiel',
        parent: 'Configuration',
        exact: true,
        breadcrumbName: 'Admin',
        component: RenderRoutes,
        routes: [
          {
            path: '/Configuration/référentiel/Activite',
            key: 'Activités',
            parent: 'Configuration',
            breadcrumbName: 'Activités',
            exact: true,
            component: () => <Activites />,
          },
          {
            path: '/Configuration/référentiel/Caneaux',
            key: 'Canaux de recrutement',
            parent: 'Configuration',
            breadcrumbName: 'Canaux de recrutement',
            exact: true,
            component: () => <Caneaux />,
          },
         

      
        ],
      },
    ],
  },
];

export default ROUTES;

الفكرة الأولى التي أتتني هي الدوران حوله ب map ثم ارجاع routes على حسب المعامل لكن التحقق صعب لأنه عندما اجد ان هناك مستوى داخلي يجب أن أدور ب map مجددا هل يمكنكم مساعدتي ؟