React Router / Wordpress htaccess Issue

I'm building a React plugin in Wordpress (for my own purposes).

I've used 'create-react-app', then 'yarn build' and then upload the production 'build' folder into Wordpress to a custom directory '/apps/my-custom-app/frontend/build'.

I've used this tutorial to create a Wordpress plugin that gets all the assets from the 'build' folder and renders the React App in the target div on a Wordpress page.

All of this works as expected, the React App renders on my Wordpress page "https://mywebsite.com/wp-page-slug/" and the React routing/navigation works fine ... but only within the React App.

The issue is that if I'm on a React page (except for the root slug) and refresh the browser, I end up getting a 404 error.

After researching on StackOverflow, I've found that this is resolved using the .htaccess file.

I've used this function from the solution in this article ...

add_action( 'init', 'my_custom_app_frontent_rewrite_rule' );

function my_custom_app_frontent_rewrite_rule() {
   add_rewrite_rule('^react-app-root-url/(.+)?', 'index.php?pagename=wp-page-slug', 'top');
}

... to add a rewrite rule, but there's something wrong. When I enable it, the entire frontend of the website goes blank (white screen).

Is the 'add_rewrite_rule' not correct? I don't know what's wrong here.

Wordpress Permalinks are currently set to 'Post Name'. The Wordpress page slug is '/wp-page-slug'. The React App Router Base URL is '/react-app-root-url'. And the homepage property in the React package.json file is '/apps/my-custom-app/frontend/build'.

Any assistance would be appreciated, thank you.