Serve multiple local dev servers (vue or react) with nginx

Question

I have a folder called my-repo which contains two apps:

my-repo/packages/foo
my-repo/packages/bar

Let's say I run them locally (vue dev server): localhost:3000 → foo and localhost:4000 → bar

I want to serve them on localhost:5000, such that

localhost:5000/foo → localhost:3000 (my-repo/packages/foo)
localhost:5000/bar → localhost:4000 (my-repo/packages/bar)

So I have the following config in my nginx.conf file:

server {
        listen       5000;
        server_name  localhost;

        # this works:
        location / {
            alias /Users/my-user/my-repo/packages/foo; # direct path
            proxy_pass http://127.0.0.1:3000/;
        }

        # this does not work:
        location /foo {
            alias /Users/my-user/my-repo/packages/foo; # absolute path
            proxy_pass http://127.0.0.1:3000/;
        }

        # as expected, this does not work:
        location /bar {
            alias /Users/my-user/my-repo/packages/bar; # absolute path
            proxy_pass http://127.0.0.1:4000/;
        }

I tried all sorts of regex based try_files and maps and I could not get it to work. I tried building the projects and serving the /dist, I could not get that to work either.

I know there are some options like baseURL, or a homapage in package.json, but I could not set these up either.

Why does the default location / work, but not the nested ones?