Rewrite rules to folder and react

Hello

Am using a react app, inside Azure. I am trying to do the following. Basically anything with a subdomain I would like to rewrite to a / pattern. For example mysubdomain.domain.com should REWRITE to domain.com/mysubdomain and keep the same URL on top.

React already has its own rewrite rules. I am including the rewrite rule I currently have which is not working underneath.

Can anyone help :)

<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<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="/" />
</rule>

     <rule name="Rewrite tees subdomain" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAny">
        <add input="{HTTP_HOST}" pattern="^(?!www)(.*)\.mydomain\.com$" />
        </conditions>
    <action type="Rewrite" url="https://mydomain.com/{R:0}"  />
</rule>
</rules>
</rewrite>

<staticContent>
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>