rendu de page react qui ne s'affiche pas

Décrivez ici votre problème ou ce que vous cherchez à faire.
ci dessous le fichier page renderer.js

"import React from "react";
import { useMatch } from "react-router-dom";

const generatePage = page => {

  try {
    const Component = require(`./pages/${page}`).default
    return <Component />;
} catch (err) {
    console.warn(err)
    return 'Under Construction'
}
}

const PageRenderer = () => {
  const {
      params: { page }
  } = useMatch()

  return generatePage(page)
}

export default PageRenderer"
------------------------------------------
ci dessous le fichier app.js

import React from 'react'
import Navigation from './components/navigation';
import { BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom' 
import PageRenderer from './page-renderer';
import login from './pages/login'
// dans page renderer l'argument est page ligne 13
function App() {
  return (
    <Router>
    <div className="App">
     <Navigation/>

     <Routes>
      <Route path="/:page" component={PageRenderer}/>
      <Route path="/" render ={ ()=> <Navigate to= "/home"/> }/>
      <Route path="/login" exact element ={login}></Route>
      <Route component={() => 404}/>
      </Routes>
    </div>
    </Router>
  );
}

export default App;
**Ce que je veux**

Lors du chargement de ma page lorsque je clique sur un lien, le contenu de la page doit s'afficher

**Ce que j'obtiens**

"le contenu ne s'affiche pas et le message ci dessous s'affiche dans ma console :

react-dom.development.js:86 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:39207:5)
    at Routes (http://localhost:3000/static/js/bundle.js:39898:5)
    at div
    at Router (http://localhost:3000/static/js/bundle.js:39832:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:37812:5)
    at App
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnOnFunctionType @ react-dom.development.js:14900
reconcileChildFibers @ react-dom.development.js:15837
reconcileChildren @ react-dom.development.js:19167
updateContextProvider @ react-dom.development.js:21154
beginWork @ react-dom.development.js:21649
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less"