Nginx multiple directories with static references

I have an Nginx server on which I want to host two seperate react apps, let's call them Aapp and Bapp.

The folder structure is like this

• Aapp (directory)
  • index.html
  • script.js
  • style.css
• Bapp (directory)
  • index.html
  • script.js
  • style.css
• ..other files and directories

I then have my config file setup like this:

server {
  root home/user/Aapp;
  index index.html;
      
  location ^~ /Bapp {
    allow all;
    alias /home/user/Bapp;
  }
  ....
}

Visiting the url my-domain/Bapp is successfully showing index.html from the folder 'Bapp' but it is including the script.js and style.csss from 'Aapp' instead of the ones from 'Bapp'.

Is there a way to tell the server if the file request is coming from the Bapp folder, it should use the 'Bapp' folder files? or do I need to update it in my application build script? (not ideal as different environments may differ)

This problem might be more script-based than server based. In your react apps, do you reference the files as src="/script.js" or just src="./script.js"?

What I imagine the issue is here is that your scripts are referencing the absolute home which is /home/user/Aapp instead of referencing the relative location.