Uncaught Error: [ProxyFacade] is not a component. All component children of must be a or

Question

I am using webpack with router v6

import React from 'react';
import { hot } from 'react-hot-loader';
import Layout from '@cmp/Layout';
import Main from '@pages/Main';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={
            <Layout>
              <Main />
            </Layout>
          }
        />
      </Routes>
    </Router>
  );
}

// export default App;
export default hot(module)(App);

and I am encountering this error.

There is a stackoverflow solution for this but it does not seem to be working for me. Please help me to solve this error.