URL Rewrite with React Router String inURL - reactjs

Question

So, I have my react app hosted in ISS fine, and I have set up the url rewrite module and my react router navigation works fine.
My issue is,
HomeSite/Searchpage I have a table with search results.
When user clicks on one of the results, it will navigate to i.e.
https://www.site/LWM2/Detail/[itemid]
and then on my detail page it gets [itemid] from url to populate information on the page. via
const { [itemid] } = useParams();
How do I set up rules in Url Rewrite to have it go to detail page and preserve the [itemid] information
Current rules:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="RemoveTrailingSlashRule1" stopProcessing="true">
<match url="(.*)/$" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Redirect" url="{R:1}" />
</rule>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/LWM2/" appendQueryString="false" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>