serving multiple react apps with nodejs and nginx - reactjs

Question

I have a Loopback App, which provides the API, and serves the static files. And 2 React apps which use the same Loopback App.
I serve the static files (from React Build folders) using serve-static and vhost.
var serveSubdomainAbc = serveStatic('abc/build', {
index: ['index.html']
});
var serveSubdomainXyz = serveStatic('./../../xyz-abc/build', {
index: ['index.html']
});
app.use(vhost('abc.example.com', serveSubdomainAbc));
app.use(vhost('xyz-abc.example.com', serveSubdomainXyz));
I also setup an nginx server with very basic settings.
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
When I directly visit the root of the apps, everything works fine, like
abc.example.com
xyz-abc.example.com
index.html is served, and then the react app starts fine. When I use a router link like,
xyz-abc.example.com/ssoRedirect, then it cannot find the ssoRedirect and it falls back to abc.example.com's index.html and serves that file, so ssoRedirect does not work. How can I make it to fallback to the correct index.html when it cannot find the required static file.