Unable to access multiple locations in NGINX conf file for Gunicorn-Flask-React app

Question

I am new to full-stack web development and I have recently developed a web app with a Gunicorn Flask-backend and Typescript React-frontend. I would like to host it securely over HTTPS on a local NGINX server (running on Ubuntu 22.04).

From almost every tutorial I have read, it appears commonplace to host frontend at location / and backend at location /api. However, I cannot seem to access multiple locations from another computer, only /. Most tutorials are not for secure apps, so perhaps I am missing something small in my setup.

The folder structure for my app is as follows:

demo
├── services
│   ├── backend
│   │   ├── server.py --> Flask app definition
│   │   ├── demo.sock --> socket file (I have triple checked permissions)
│   ├── frontend
│   │   ├── build --> npm build folder
│   │   ├── src
│   │   ├── package.json

Below are the NGINX conf and service files:

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

        server_name {IP_ADDRESS};

        client_max_body_size 500M;

        return 301 https://$server_name/api/$request_uri;
}

server {
        listen 443 ssl;
        listen [::]:443 ssl;
        include snippets/self-signed.conf;
        include snippets/ssl-params.conf;

        server_name {IP_ADDRESS};

        client_max_body_size 500M;

        location / {
                root /path/to/demo/services/frontend/build;
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }

        location ~ /api/ {
                include proxy_params;
                proxy_pass http://unix:/path/to/demo/services/backend/demo.sock;
        }
}

[Unit]
Description=gunicorn instance
After=network.target

[Service]
User=username
Group=www-data
WorkingDirectory=/path/to/demo/services/backend
Environment="PATH=/path/to/demo/services/backend/.venv/bin"
ExecStart=/path/to/demo/services/backend/.venv/bin/gunicorn --workers 3 --bind unix:demo.sock -m 007 server:app

[Install]
WantedBy=multi-user.target

With the above, I can access the frontend at https:{IP_ADDRESS} but the frontend cannot access the backend at https:{IP_ADDRESS}/api.

Someone with more experience with this, please help! What am I doing wrong with this setup?

So far, I have tried using a socket and using a different port for frontend/backend. I have also tried swapping what is being hosted at each location. If inverted, I can then only access the backend at https:{IP_ADDRESS}.