Hello everyone I'm making sort of blog page and have problem with retrieving data for single item from database I searched solution for this problem and I just can't find it. In this project I use firestore and react router. This is my Home function (Home page), where i retrive items from database

function Home({isAuth}) {
  const[articlesList, setArticleList] = useState([])
  const articleCollectionRef = collection(db, 'articles')

  const deleteArticle = async (id) => {
      const articleDoc = doc(db, "articles", id)
      await deleteDoc(articleDoc)
  }
  
  useEffect(() => {
      const getArticles = async () => {
      const data = await getDocs(articleCollectionRef)
      setArticleList(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
    }
      getArticles()
    },[deleteArticle])

  
 
  return <Grid container direction="row-reverse" justifyContent="space-evenly" alignItems="center" marginTop={2} >
    {articlesList.map((article) => {
      return(
          <Grid item alignItems="center" margin={1}>
            <Link to={`articles/${article.id}`} articlesList={articlesList} ><PostCard isAuth={isAuth} article={article} deleteArticle={deleteArticle}/></Link>
          </Grid>
    )})}
  </Grid>
}

export default Home;

And here is my single article component where i get item id with useParams but i dont know how to get item based on that id

const SingleArticle = () => {
  
  const { id } = useParams()

  return (
    <>
      < h5>Post with id: { id }</h5>
    </>
  )
}