Mobile Browser Share Link Issue

The Problem:

I have a site where the urls have this structure:

/item/:category

/item/item_detail/:id

When on /item/:category clicking on the mobile share link, it sends the correct url (e.g. /item/sports). When on /item/item_detail/:id, it sends the same link as before (/item/sports).

To reiterate:

Browser url says: ../item/item_detail/12345

The url that they get is: /item/sports

I have looked into the Web Share API, but I don't believe that fits my needs. The code is written in React, and is all client side (i.e. no server-side rendering). The routes are composed with react-router-dom and react-redux, so no atypical route setup.

What am I supposed to be looking for?

For context, I am referring to this mobile share function in mobile browsers: