Azure SWA 404s on refresh when app is using custom domain

Hello, we host our React app with Azure SWAs and then use a custom domain through front door. The custom domain we use hosts a plethora of other apps, and because of this we have to use different paths for each app.
For example:
Custom-Domain.com/development/App1
Custom-Domain.com/development/App2

Whenever we visit App2 for example and navigate to a page, i.e. Custom-Domain.com/development/App2/basereports, on refresh we get a 404 screen and the document request fails to find anything at the URL Custom-Domain.com/development/App2/basereports. I understand this is an issue with server side routing vs client side routing, and the staticwebapp.config.json can be set up to fix this. However, setting up a navigation fallback doesn't seem to do anything on this custom domain app. Below is an example of what our staticwebapp.config.json looks like
`{
"navigationFallback": {
"rewrite": "/"
},
"trailingSlash": "auto"
}`

We have tried numerous different fixes, such as `rewrite:/index.html` and removing the trailing slash but nothing seems to work or take effect in the App on refresh.

The way we've got around this in the past is through FrontDoor pattern matching i.e.

However this doesn't work for the wildcard routes, and we'd like a better solution and a "one-time fix" rather then every time a new route is added, having to hard set that pattern match.

Any advice would be greatly appreciated and if anything else is needed please lmk :)