const routes = [
{
    path: '/home',
    exact: true,
    name: 'Home',
    component: <Home />,
    private: true
},
{
    path: '/dashboard',
    exact: true,
    name: 'Dashboard',
    component: <Dashboard />,
    private: true
},
];
const Content = () => {
return (
    <div className="c-app c-default-layout" style={{background: "#E5E5E5"}}>
        <div className="c-wrapper">
            <Header name={"Riya"}/>
            <div className="c-body">
                <React.Suspense fallback={<div />}>
                    <Switch>
                        <Route path="/dashboard" children={<Dashboard />} />
                        {routesFile.map((route, idx) => {
                            return route.component && (
                                <Route
                                    key={idx}
                                    path={route.path}
                                    name={route.name}
                                    children={(props) => (
                                        <route.component {...props} />
                                    )} />
                            )
                        })}
                    </Switch>
                </React.Suspense>
            </div>
            <Footer />
        </div>
    </div>
)
}
export default Content;

Here I am getting the error while i try to give a dynamic paths to react component using react-router-dom. what should i put in so that it can run without an error? please help me with the code.