Рекурсивный роутинг React + react-router-dom v6

Всем привет. Изучая новую версию react-router-dom(rrd) я увидел, что появилась возможность вложенных роутов.

Я попробовал сделать систему роутинга с объектом ROUTES, в котором были бы параметры, необходимые для Route из rrd + всякие доп свойства. Вот этот объект:

export const ROUTES: IRoute[] = [
{
    path: paths.HOME,
    element: Map,
    children: [
        {
            path: paths.ADMIN,
            element: Admin,
        },
        {
            path: 'test1',
            element: Admin,
        },
        {
            path: 'test2',
            element: Admin,
            children: [
                {
                    path: 't2test1',
                    element: Admin,
                }
            ]
        },
    ]
},];

В итоге, я хотел сделать рекурсивный компонент, которой бы принимал один роут, создавал его, а потом внутри себя создавал дочерние(те что в свойстве children) роуты. И я, вроде, сделал, но мне выдает ошибку. Не до конца понимаю, как это исправить.

import React, {FC} from 'react';
import {Route as R} from 'react-router-dom';

import {IRoute} from "./routes";


interface RouteProps {
    route: IRoute;
}

const Route: FC<RouteProps> = ({route}) => {
    return (
        <R
            index={route.index}
            path={route.path}
            element={<route.element/>}
        >
            {route.children?.map(r => <Route route={r}/>)}
        </R>
    );
};

export default Route;