React app deployed to IIS StaticFile handler problem

I have a sample React application. I deployed the application to IIS. Default page is OK, but /category page returns 404 - File or directory not found.

import { Route, BrowserRouter } from "react-router-dom";

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const Category = () => (
  <div>
    <h2>Category</h2>
  </div>
);

export default function App() {
  return (
      <BrowserRouter>
        <Route path="/"><Home /></Route>
        <Route path="/category"><Category /></Route>
      </BrowserRouter>
  );
}

Web.config file content. runAllManagedModulesForAllRequests solution not working unfortunately.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="UrlRoutingModule"/>
    </modules>
  </system.webServer>
</configuration>

Detailed Error Information

• Module: IIS Web Core
• Notification: MapRequestHandler
• Handler: StaticFile
• Error Code 0x80070002

ny suggestion please

Using URL rewrite modul, redirect all requests to index.html file.

<?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>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>