React Router - Grouping routes in variables or components - reactjs

Question

I am trying to set up my router to handle a multilingual site, and having trouble with the modularization of the routes.
My routes file looks like this:
import React from 'react'
import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
import FrontPage from './views/front-view'
import SearchPortal from './views/search-portal-view'
import DocumentView from './views/document-view'
import ErrorView from './views/error-view'
export const Routes = (): JSX.Element => {
const { path } = useRouteMatch()
return (
<>
<Route path={`${path}/search`} component={SearchPortal} />
<Route path={`${path}/document/`} component={DocumentView} />
<Route path={`${path}/error`} component={ErrorView} />
<Route path={`${path}/`} exact component={FrontPage} />
<Route component={ErrorView} />
</>
)
}
export const DefaultRoutes = (
<>
<Route path='/search'>
{console.log('Search Route')}
<Redirect to='/en/search' />
</Route>
<Route path='/document'>
{console.log('document route')}
<Redirect to='/en/document' />
</Route>
<Route path='/error'>
{console.log('error route')}
<Redirect to='/en/error' />
</Route>
<Route path='/' exact>
{console.log('home route')}
<Redirect to='/en/' />
</Route>
</>
)
export const LangRoutes = (): JSX.Element => (
<Switch>
<Route path='/:lang([a-z]{2})' component={Routes} />
{DefaultRoutes}
<Route component={ErrorView} /> {/* Rendered when nothing else works */}
</Switch>
)
Everything works except for if I have an invalid URL without a language on it. (eg. localhost:3000/invalidPath). If the path becomes invalid after the language, it works fine, and the Error page is displayed.
If, however, I copy and paste the contents of the DefaultRoutes (without the Fragment) into LangRoutes, then everything works properly.
Why is this? And is there a better way to go about doing this?