Почему роуты не работают?

Написал роуты вручную по видео и все работает, хочу теперь сделать их через функцию map, но не получается. В видео используется react-router 5. Я использую react-router 6. В браузере ошибка

No routes matched location "/posts"

No routes matched location "/posts"
at Routes (http://localhost:3000/static/js/bundle.js:41662:5) at AppRouter at Router (http://localhost:3000/static/js/bundle.js:41600:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:39947:5) at App

Помогите, пожалуйста.

AppRouter.jsx

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

const AppRouter = () => {
    console.log(routes)
    return (
        <Routes>

            {
                routes.map(route => {
                    <Route key={route.path} path={route.path} element={route.element} exact={route.exact}/>
                })

            }
            {/*<Route path="/" element={<div></div>}/>*/}
            {/*<Route path="/about" element={<About/>}/>*/}
            {/*<Route path="/posts" exact={true}  element={<Posts/>}/>*/}
            {/*<Route path="posts/:id" exact={true} element={<PostIdPage/>}/>*/}
            {/*<Route path="/error" element={<Error/>}/>*/}
            {/*<Route path="*" exact={true} element={<Error/>}/>*/}
        </Routes>
    );
};

export default AppRouter;

router/index.js

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


export const routes = [
    {path: '/about', element: About, exact: true},
    {path: '/posts', element: Posts, exact: true},
    {path: '/posts/:id', element: PostIdPage, exact: true},
]