How do I setup nginx for multiple web app with multiple subdomains in GCE

I am using GCE with LEMP stack. I have multiple subdomains and each subdomain has different root folder.

My setup is as below:

Production app

server {
    listen 80;
    listen [::]:80 ipv6only=on;

    listen 443 ssl http2;
    listen [::]:443 ipv6only=on ssl http2;

    ssl_certificate /etc/nginx/ssl/*.example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/*.example.com.key;

    server_name prod.example.com;
    root /var/www/example/web;
    client_max_body_size 10M;
}

Staging app

server {
    listen [::]:80;
    listen [::]:443 ssl http2;
    
    ssl_certificate /etc/nginx/ssl/*.example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/*.example.com.key;

    server_name staging.example.com;
    root /var/www/example-staging/web;
    client_max_body_size 10M;
}

They have the same config except for the server_name part. But, it seems like nginx is not able to tell apart the 2 different configuration.

No matter if I were to use prod.example.com or staging.example.com, both will only route to the prod root folder.

Is there anything wrong with my configurations that is causing this issue?