React Router using id as parameter not working

Question

I have my react app connected to firebase's firestore. I was using firebase's real-time db and this issue didn't occur with it, but now I simply changed my db to firestore and I have this issue. (I didn't change any react code, so it must be something with firestore).

In my appcontainer file I have this:

const [userlist, setUserList] = useState([])
const [invoicesList, setInvoicesList] = useState([])

const oneinvoice = invoicesList && invoicesList.map(oneinv => {
return <Route path={"/invoice/"+oneinv.id}>
  <OneInvoice oneinv={oneinv} /> 
</Route>
})

So every instance of an invoice has a unique path which is equal to: 'invoice'/+"id".

In my app container I fetch my invoices using firestore:

useEffect(() => {
    db.collection("users").doc(user.uid).get().then(doc => {
      const userlist = doc.data() 
      setUserList(userlist) 
      setInvoicesList(userlist.invoices)
    })  
  },[])

And in my invoices UI I have the following:

const invoicerow = invoicesList && invoicesList.map(inv => {  
    return 
        <div className="flexrow"> 
          <h5>{inv.name}</h5>
          <Link to={`/invoice/${inv.id}`}>Open Invoice</Link>
        </div>    
  })

Now my issue is when I click on the "open invoice" which should open that invoice page, it shows up blank but the URL path is good, it has the correct id but nothing displays. Note: When I reload the page suddenly the invoice displays perfectly well and even if I go back and click on the "open invoice" it works. It seems to not work only on the initial creation of the invoice only.

Again this exact code was working perfectly fine with firebase's RTDB, but not now with firestore.