Как конкретно указать react-router где рендерить?

Question

[Funky_Rhyme]

Имеется небольшое SPA приложение. На главной странице только боковое меню полностью обрамленное BrowserRouter и с этим все понятно, там всего две ссылки (домой и пользователи).
Однако при нажатии на ссылку "пользователи" у меня рендерится таблица с этими самыми пользователями (Ant Design Table). Хочу, чтобы по нажатию на имя пользователя вызывался другой компонент НА МЕСТО этой таблицы. На данный момент это выглядит как-то так:

{
      key: "1",
      title: "Name",
      dataIndex: "name",
      render: (text: string) => (
          <Link to={"/users/posts/" + text} component={UserPosts}>{text}</Link>
      ),
    },

Однако тут сразу два момента. Поскольку указанный выше участок кода отвечает за отображение колонки таблицы, то вместо ссылки меняется сама ячейка. Второй момент - я не могу передать пропсы описанные в компоненте UserPosts таким методом, а они необходимы.

export default function UserPosts({name}: {name: string | undefined}) {

  return (
    //Заглушка
    <h1>
      Посты {name}
    </h1>
    );
}

Интуитивно я понимаю, что должен быть некий глобальный доступ к пути в строке браузера, но вот как явно указать где должен рендериться компонент, причем из дочернего в родительский, с передачей пропсов я не понимаю.