Как сделать динамические React Router адреса с функциональными компонентами?

Строго функциональные компоненты.

Имеется компонент Category, выводящий список всех товаров соответствующей категории. По клику на какой-либо товар его id передаётся в компонент Product, оттуда в GraphQL запрос и выводится информация о текущем товаре.

Короче говоря, мне необходимо сделать так, чтобы например по адресу /product/id1 можно было получить доступ к необходимому товару.

Вставлю немного кода для понимания.

      <Switch>
        <Route exact path='/'>
          <Categories/>
        </Route>
        <Route path="/product/">
          <Product prodID={prodID}/>
        </Route>
      </Switch>

Вот роуты страниц. Здесь prodID - это id товара, который получаем из компонента Categories и потом передаём в GraphQL так:

const {data} = useQuery(CHOOSE_PRODUCT, {
    variables: {id: prodID}
})

Я пробовал давать динамический path="/product/:id" в роут продукта и передавать его через const {id} = useParams(), но результата не дало. Почему - не знаю. Вероятно это особенности работы с GraphQL, но сам пока не могу разобраться.