Как реализовать отображение компонентов одновременно, расположенных по 2-м разным роутам?

Question

[lexstile]

Есть главная страница, на ней есть список элементов.
По клику я хочу показывать popup с доп. информацией элемента (модальное окно).
Но при этом хочу, чтобы на фоне оставался старый компонент.
Пробовал по инструкции - не получилось, url меняется, но вижу я по-прежнему только компонент , который соотвествует главной странице.

// Роутинг
export const Routing = () => {
  const location = useLocation();
// в background я прокидываю location по клику на кнопку
  const background = location.state && location.state?.background;

  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <Switch location={background || location}>
        <Route exact path={ROUTES.main} component={TaskListPage} />
        {background && <Route path={ROUTES.taskItem} children={<p>test</p>} />}
      </Switch>
    </Suspense>
  );
};

// Обработчик клика в таблице
const onRowClick = (rowId: string | number) =>
    history.push({ pathname: generateLink(ROUTES.taskItem, { taskId: rowId }), state: { background: location } });