React router with dynamic array

I want to create a dynamic router based on my page list. But I can’t define my components.
Link path and component names are coming to my list.
Is there any solution to this?

import Home from "../pages/Home";

import BannerManagement from "../pages/BannerManagement";

My page list in App.js

const pageList= [
  {
    path: "home",
    element: "Home",
  },
  {
    path: "BannerManagement",
    element: "BannerManagement",
  }
];

in App.js

ReactDOM.render(
        <Router>
            <BrowserRouter>
              {
                pageList.map(page=>{
                return (<Route exact path={"/"+page.path} component={page.element}/>)
              })
            }
            </BrowserRouter>
      </Router>,document.getElementById('root'));