Cannot match dynamic routes like /recipes/:id/ingredients - node.js

Question

I am using the npm package react-router-dom#4.0.0-beta.6 for my react app.
I am able to match routes like:
/trends
/news
/recipes
But I can't match routes like:
/recipes/:id/ingredients or /recipes/1234/ingredients
If I switch from /recipes/1234 to /recipes/1234/ingredients I only match the route /recipes/:id but not /recipes/:id/ingredients.
The app looks like this:
const factory = (name, path) => {
return (props) => {
const { children, match, routes } = props;
const { params } = match;
// convert the child routes from /recipes/:id/ingredients to /recipes/1234/ingredients
const others = routes.map(x => pathToRegexp.compile(x.path)(params));
return (
<div>
<h3>{name}</h3>
<ul>
{others.map(x =>
<Link key={x} to={x}>{x}</Link>
)}
</ul>
{children}
</div>
);
};
};
const rootPattern = '/recipes/:id';
const routes = [
{
path: rootPattern,
component: factory('Root', rootPattern),
routes: [
{
path: `${rootPattern}/ingredients`,
component: factory('Ingredients', `${rootPattern}/ingredients`),
},
{
path: `${rootPattern}/steps`,
component: factory('Steps', `${rootPattern}/steps`),
},
],
},
];
// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
const RouteWithSubRoutes = (route) => (
<Route path={route.path} render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes}/>
)}/>
);
const RouteConfigExample = () => (
<Router>
<div>
<ul>
<li><Link to="/recipes/1234">Sandwiches</Link></li>
</ul>
{routes.map((route, i) => (
<RouteWithSubRoutes key={i} {...route}/>
))}
</div>
</Router>
);
To be fair I don't really understand why my app doesn't match the dynamic routes.
You can find a complete example at https://github.com/jbrieske/react-router-config.