How to configure .htaccess file for two different websites routing in my shared hosting server

Question

I am using host gator shared hosting and I have already a php app serving on a different domain. Now I hosted another domain with my react app.

Hosting works fine but when I reload on a specific url, I get 500 error. I found the answer for this is, react router is doing routing so when reload on specific url, it do not find the file for that url. makes sense.

original .htaccess in public_html folder

<IfModule mod_headers.c>    
    # Header add Access-Control-Allow-Origin *
    Header add Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
    Header add Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With, x-api-key"
</IfModule>
# Header set Access-Control-Allow-Origin *

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>


# Header add Access-Control-Allow-Origin "*"
# Header add Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
# Header add Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"


# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php82” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php82___lsphp .php .php8 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit

Now I am trying to add my own routing rules for react app which I found in a blog

added these in IfModule block.RewriteCond rules already exist so I did not duplicated that

 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule . /index.html [L]

and after debugging I realized the order matters now the file looks like this

<IfModule mod_headers.c>    
    # Header add Access-Control-Allow-Origin *
    Header add Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
    Header add Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With, x-api-key"
</IfModule>
# Header set Access-Control-Allow-Origin *

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On
    
#FOR REACT
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
#

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d

#FOR REACT
    RewriteRule . /index.html [L]
    # RewriteRule ^ index.php [L]
</IfModule>


# Header add Access-Control-Allow-Origin "*"
# Header add Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
# Header add Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"


# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php82” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php82___lsphp .php .php8 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit

now the issue is with the last two rules in the block which are:

RewriteRule . /index.html [L]
# RewriteRule ^ index.php [L]

if I use both, my both sites give 404 if I use index.html, react works perfectly, if I use index.php, the php website works correctly

how can I use both without any routing problem?

[edit] this is document root path where react files are

.htaccess is in ~/public_html folder