I'm trying to configure the react router dom route structure, but apparently my routes are not being recognized within the application

routes/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 (aplication)

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')
)

If I remove my component, and add some text it displays correctly, but with the component it displays a blank screen.