How to write server block for React app on port 5000 and api on port 3030

I have a react app on port 5000 – the site works when loaded under http or https. However, when the app makes a call to the api running on port 3030, I get ERR_SSL_PROTOCOL_ERROR in the browser. I’ve tried so many config options, I’ve lost count. For a minute, I thought I should make a new block with a different route for the api, but I don’t think that’s right. Really stuck! If anyone can point me in right direction, I’d be most grateful:

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

  root path_to_build_dir;
  index index.html index.htm;
  server_name mydomain.com;

  ssl_certificate /etc/letsencrypt/live/www.mydomain.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/www.mydomain.com/privkey.pem;
  ssl_trusted_certificate /etc/letsencrypt/live/www.mydomain.com/fullchain.pem;
  include /etc/nginx/snippets/ssl.conf;
  include /etc/nginx/snippets/letsencrypt.conf;

  location / {
    proxy_pass http://xxx.xx.xxx.xxx:5000;
  }

  location /authentication {
    proxy_pass http://xxx.xx.xxx.xxx:3030;
  }
}

server {
  listen 443 default_server ssl http2;
  listen [::]:443 ssl http2;

  root path_to_build_dir;
  index index.html index.htm;
  server_name mydomain.com;

  ssl_certificate /etc/letsencrypt/live/www.mydomain.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/www.mydomain.com/privkey.pem;
  ssl_trusted_certificate /etc/letsencrypt/live/www.mydomain.com/fullchain.pem;
  include /etc/nginx/snippets/ssl.conf;
  include /etc/nginx/snippets/letsencrypt.conf;

  location / {
    proxy_pass http://xxx.xx.xxx.xxx:5000;
  }

  location /authentication {
    proxy_pass http://xxx.xx.xxx.xxx:3030;
  }
}