Estoy tratando de configurar la estructura de la ruta dom del enrutador de reacción, pero aparentemente mis rutas no se reconocen dentro de la aplicación

rutas/index.tsx

 import React from 'react'; import { inject, observer } from 'mobx-react'; import { Routes, Route, Link } from "react-router-dom"; import { Main, } from '../scenes'; import { Routes as RoutesPath } from './routing'; const RoutesContainer: React.FC = () => ( <Routes> <Route path={RoutesPath.MAIN} element={<Main />} /> </Routes> ); export { Routes }; export default inject('routing')(observer(RoutesContainer));

index.tsx (aplicación)

 import React from 'react' import { Provider } from 'mobx-react'; import { render } from 'react-dom' import './index.css' import store from './stores'; import { Routes } from './routes'; import { BrowserRouter } from 'react-router-dom'; render( <Provider rootStore={store}> <BrowserRouter> <React.StrictMode> <Routes /> </React.StrictMode> </BrowserRouter> </Provider>, document.getElementById('root') )

Si elimino mi componente y agrego texto, se muestra correctamente, pero con el componente muestra una pantalla en blanco.