Переход из списка товаров на индивидуальное описание товара в React

При клике на "информация о товаре" должна отрисовываться его индивидуальная карточка на отдельной странице. Проблема в том,что URL меняется в конце добавляется id определенной карточки, но на странице отрисовываются все карточки, всех товаров а не одна.

App:

const [viewArticles, setViewArticles] = useState([])
    
useEffect(() => {
  firebase
    .firestore()
    .collection('articles')
    .orderBy('id', 'asc')
    .get()
    .then((collections) => {
        const articles =
            collections.docs.map((article) => article.data())
        setViewArticles(articles)
    })
}, [])

<Route path="/shopList/:id" >
  <ShopList viewArticles={viewArticles} /> 
  **Переход на страницу со списком товаров**
</Route>

ShopList: Список товаров

{
  viewArticles.map(item => (
    <div>
      <Link to={`/shopCard/${item.id}`}>{item.name}</Link>
      **Переход на индивидуальное описание товара**        
    </div>
  ))
}

ShopCard: описание товара

{
  viewArticles.map(el => (
    <p>{el.name}</p>
  ))
}