React Router - Создание панировочных сухарей

Я пытаюсь сделать компонент Breadcrumbs с помощью react-router-dom, и у меня есть несколько вопросов

Скажем, мне дали маршрут, который выглядит так:

breadcrumbRoutes: [
    {
      path: '/devicePolicies',
      exact: true,
      name: "Device Policies",
      main: () => <h2>Device Policies View</h2>
    },
    {
      path: '/devicePolicies/controlPanel',
      exact: true,
      name: "Control Panel",
      main: () => <h2>Control Panel View</h2>
    },
    {
      path: '/devicePolicies/controlPanel/settings',
      exact: true,
      name: "Settings",
      main: () => <h2>Settings View</h2>
    }
  ]

В настоящее время мой компонент Breadcrumbs будет визуализировать его так, чтобы он выглядел как этот Device Policies/Control Panel/Settings. Однако он неправильно отображает правильный компонент, связанный с самым последним путем /devicePolicies/controlPanel/settings. Например, вместо визуализации компонента settings он отображает компонент Home.

Breadcrumbs.js

Class Breadcrumbs extend Component

insertBreadcrumbs() {
var routes = this.props.routes;

    return (
      <div style = {{display: 'flex'}}>
          <ul className = "breadcrumb">
            { this.insertListElement(routes) }
          </ul>
          {routes.map((route) => (
             <Route
                  key = {route.path}
                  path = {route.path}
                  exact = {route.exact}
                  component = {route.main}
             />
          ))}
     </div>
    );
}
render() {
    return (
        <Router>
              { this.insertBreadcrumbs() }
        </Router>
    );
}

App.js

<Breadcrumbs 
        name = "breadcrumbRoutes"
        routes = {this.state.breadcrumbRoutes}
        onChange = {this.handleChangeEvent}
 />

Как я могу сделать так, чтобы загруженное представление всегда было последним компонентом моего пути? В этом примере я хочу загрузить компонент settings

Ваша помощь очень ценится!