Using Nginx to merge a vanilla html and React application

Question

Here's the general problem

I have an existing site, which is just html, css, and js. I then have a new part of the site which was made with React, and utilizes the React Router.

I want the site to use the original site on every route that isn't /frames. And when on /frames I want to use the React Router to route things

Example:

http://example.com/index.html   -> original index.html
http://example.com/about.html   -> original about.html
http://example.com/contact.html -> original contact.html

http://example.com/frames/      -> react router default route
http://example.com/frames/xyz   -> react router route that matches xyz

This is my current config located in sites-available and symlinked to sites-enabled

server {
        listen 80 ;
        listen [::]:80 ;

        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location /frames {
                root   /var/www/GolfersFrames/build;
                index  index.html index.htm;
                try_files $uri /index.html =404;
        }

        location / {
               root /var/www/Golfersflyby;
               try_files $uri $uri/ =404;
        }
}

The original site works as intended.

The current problem with this is when it tries to load the react site, by navigating to http://example.com/frames/ the site doesn't render because the js doesn't load. Instead of returning the js code, nginx responds with the React index.html file

If you the problem hasn't been fixed yet you can experiment for yourself at http://132.145.215.101/frames/