nested router, root leads to 404

<Router>
    <Route path="/" component={allowAuthenticated(AppContainer)}>
        {/* other route configurations here */}

        <Route path="/flashcards" component={Flashcards}>
            <Route path="/" component={FlashcardsOverview}>
                <Route path="collection/:collection_id" component={FlashcardCollectionsView} />
            </Route>
        </Route>
    </Route>

    <Route path="*404" component={Page404} />
</Router>

<Route path="/" component={ ... }>
  <Route path="layer1" component={ ... }>
    <Route path="layer2" component={ ... }/>
  </Route>
</Route>

const Flashcards = (props: ParentProps) => {
    return (<>{props.children}</>)
}