nginx reverse proxy cannot get files returns 404

I am trying to make a reverse proxy to access some devices.

server {
    listen 3000;
    server_name localhost;

    location /device1 {
        proxy_pass http://192.168.0.10;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    location /device2 {
        proxy_pass http://192.168.0.11;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

}

When I go to localhost:3000/device1 I get an empty page because it cannot load in the javascript and css. Opening developer tools shows me that these GET requests fail with 404 not found.

I added another location that's just '/' and has the device 1 ip.

location /{
        proxy_pass http://192.168.0.11;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

This works for device 1 but not device 2. I can't place another block like this because then I get duplicate error.

How can I solve the 404 error so that localhost:3000/device1 redirects to the ip and loads all the javascript. and idem for device2