React Route comonent

in my App.tsx file i have this code

import React from 'react';import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'import PageRender from './PageRender';const App = () => {  return (<div className='container'><Router><Switch><Route exact path="/" component = {PageRender} /><Route exact path="/:page" component={PageRender} /><Route exact path="/:page/:slug" component={PageRender} /></Switch></Router></div>  );}export default App;

In the file PageRender.tsx i have:

import React from 'react'import { useParams  } from 'react-router-dom'import { IParams } from './utils/TypeScript'import NotFound from './components/global/NotFound'const generatePage = (name: string) => {    /*const component = () => require(`./pages/${name}`).default    try {        return React.createElement(component())    } catch (error) {        if( error instanceof Error){            return <NotFound />;        }    }*/    return name;}const PageRender = () => {     const { page, slug }: IParams = useParams()    let name = '';    if(page){        name = slug ? `${page}/[slug]` : `${page}`    }    return generatePage(name)}export default PageRender

Now, the code works, but i have an error in file App.tsx on componentof route

in paticularthis:

ERROR in src/App.tsx:12:38TS2769: No overload matches this call.Overload 1 of 2, '(props: (RouteProps<"/:page", { page: string; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>) | Readonly<RouteProps<"/:page", { ...; }> & OmitNative<...>>): Route<...>', gave the following error.Type '() => string' is not assignable to type 'ComponentType | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined'.Overload 2 of 2, '(props: RouteProps<"/:page", { page: string; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>,context: any): Route<...>', gave the following error.Type '() => string' is not assignable to type 'ComponentType | ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined'.

{"name": "client","version": "0.1.0","private": true,"dependencies": {"@testing-library/jest-dom": "^5.16.1","@testing-library/react": "^12.1.2","@testing-library/user-event": "^13.5.0","@types/jest": "^27.4.0","@types/node": "^16.11.20","@types/react": "^17.0.38","@types/react-dom": "^17.0.11","axios": "^0.21.1","react": "^17.0.2","react-dom": "^17.0.2","react-redux": "^7.2.4","react-router-dom": "^5.2.0","react-scripts": "5.0.0","redux": "^4.1.0","redux-devtools-extension": "^2.13.9","redux-thunk": "^2.3.0","typescript": "^4.5.4","web-vitals": "^2.1.3"  },"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"  },"eslintConfig": {"extends": ["react-app","react-app/jest"    ]  },"browserslist": {"production": [">0.2%","not dead","not op_mini all"    ],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"    ]  },"devDependencies": {"@types/react-router-dom": "^5.1.7"  }}