Как сделать подгрузку роутов из массива в компонент библиотеки react router dom v6

import React from 'react';
import { Routes, Route, Navigate } from "react-router-dom";
import { routes } from '../router/routes';

const AppRouter = () => {
    return (
        <Routes>
            {routes.map(route =>
                <Route path={route.path} element={route.component} />
            )}
            <Route path="*" element={<Navigate to="/posts" />} />
        </Routes>
    )
}

export default AppRouter

import About from "../pages/About";
import PostIdPage from "../pages/PostIdPage";
import Posts from "../pages/Posts";


export const routes = () => [
    { path: '/about', component: <About /> },
    { path: '/posts/:id', component: <PostIdPage /> },
    { path: '/posts', component: <Posts /> }
]