Problema de renderizado de rutas fuera de component app

[skyz]

Tengo la siguiente estructura en react js:

src
--> components (Folder)
Container.js
Content.js
Footer.js
Header.js
List.js
--> pages (Folder)
About.js
Home.js
Login.js
New.js
App.js
routes.js

Componente App.js:

Código:

function App() {
      return (
        <div>
          <BrowserRouter>
            <Switch>
              <Route path="/login" component={Login} />
              <Route path="/container" component={Container} />
              <Redirect from="/" to="/login" />
            </Switch>
          </BrowserRouter>
        </div>
      );
    }
    export default App;

Componente Container.js:

Código:

export const Container = () => {
        return(
            <div>
                <Header />
                <hr/>
                <Content />
                <hr/>
                <Footer />
            </div>
        );
    }

routes.js:

Código:

mport React from 'react';
    
    const Home = React.lazy(() => import('./pages/Home'));
    const News = React.lazy(() => import('./pages/News'));
    const About = React.lazy(() => import('./pages/About'));
    
    const routes = [
        {
            path:'/home',
            component: Home
        },
        {
            path:'/news',
            component: News,
        },
        {
            path:'/about',
            component: About,
        },
    ];
    
    export default routes;

Component List.js:

Código:

export const List = () => {
        return(
            <div>
                <Link to="/home">Home</Link> |
                <Link to="/news">News</Link> |
                <Link to="/about">About</Link>
            </div>
        );
    }

Component Content.js:

Código:

import routes from '../routes';
    
    const Content = () => {
        return(
            <div>
                <br/>
                <List />
                <br />
                <Switch>
                {
                    routes.map((route, index) => (
                        <Route
                         key={index}
                         path={route.path}
                         component={route.component}
                        />
                    ))
                }
                </Switch>
            </div>
        );
    }
    
    export default Content;

Necesito renderizar las rutas que estan en Content.js, pero las rutas no se muestran.