Problems with React and useRoutes

I am trying to use React and useRoutes, but I get an error and nothing is displayed. I can't figure out where the problem is, can you help me? Thank you very much

This is the error

routes.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'createElement')
    at routes.js:12:17
    ..

These are my files

App.jsx contains the import of BrowserRouter

import Index from './Index.jsx';
import { BrowserRouter as Router, Link } from "react-router-dom";
import { Menu } from './Menu.jsx';

export const App = () => (
    <div>
        <Router>
		    <Menu />
			<Index />
        </Router>
    </div>
);

Index.jsx containing the useRoutes

import { useRoutes } from "react-router-dom";
import { routes } from "./routes";

export const Component = () => {
  let element = useRoutes(routes);
  return element;
};

export default Component;

router.js where all routes will be declared

import { React } from "react";
import { Home } from './Home.jsx';
import { ErrorPage } from './ErrorPage.jsx';

export const routes = [
    {
        path:'/', 
        element:<Home />
    },
    { 
        path:'*',             
        element:<ErrorPage /> 
    }
];

Menu.jsx containing the site menu and consequently the Links

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { pages } from '../../data/pages';

export const MenuTop = () => {
    const [myPages, setMyPages] = useState(pages);
    const [pageToDisplay, setPageToDisplay] = useState("/");

    const displayPage = (page) => { 
        setPageToDisplay(page.url);
    }

    return (
        <Router>
            <div className="ui menu">
                {myPages.map((el) => {
                    const { id, name, url } = el;
                    return (
                        <Link to={url} key={id} className={`item ${pageToDisplay == url ? "active" : ""}`} onClick={() => displayPage({url})}>{name}</Link>
                    );
                })}
            </div>
        </Router> 
    );
}

The issue is that you're importing the wrong React, using a named export instead of a default one. Here is the error, in the router.js/routes.js:

On the first line, import { React } from 'react'

import { React } from "react";
import { Home } from './Home.jsx';
import { ErrorPage } from './ErrorPage.jsx';

export const routes = [
    {
        path:'/', 
        element:<Home />
    },
    { 
        path:'*',             
        element:<ErrorPage /> 
    }
];

Change it to a default export:

import React from "react";
import { Home } from './Home.jsx';
import { ErrorPage } from './ErrorPage.jsx';

export const routes = [
    {
        path:'/', 
        element:<Home />
    },
    { 
        path:'*',             
        element:<ErrorPage /> 
    }
];

This should fix the issue.