How to configure multiple react projects using nginx?

Question

I have 3 different React projects, pointing to the same IP address with different ports.

Routing works accurately for the first project(default project)

For the other 2, routing works fine if I'm navigating from the very first page of the website.
For an instance, if I'm at some.ip:3000 then I click something and now, I'm at some.ip:3000/page, it works fine but if I try some.ip:3000/page directly, 404 page is returned.

Following is the nginx configuration - /etc/nginx/sites-available/default

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

    server_name <private-IP>;

    root /var/www/<project1>;
    index index.html index.htm; 

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

server {
    listen 3000;
    listen [::]:3000;
    server_name <private-IP>;

    root /var/www/<project2>;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }
}

server {
    listen 8000;
    listen [::]:8000;
    server_name <private-IP>;

    root /var/www/<project3>;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}