ReactJS with Nginx 404 Not Found when entering a specific url path - node.js

Question

What I am trying to do is to prepare this machine to serve my web application. It works without any problems when I serve it via npm start.
I have a domain, let's say, example.com on which I installed SSL with Certbot and have successfully rerouted http to https with www.example.com and example.com.
Now what happens is when I go to www.example.com or example.com it works fine, and I can move to whatever url path I want, as long as it is directly accessed from any button on the homepage, but whenever I try to access an individual url path, let's say myexample.com/admin/login (it is hidden from the homepage) or any manually entered url path, the webserver returns error 404. This does not happen when I do the same with npm start.
I am running an EC2 machine with the following components installed:
Operating System: Ubuntu 20.04 LTS
Webserver: Nginx 1.18
Node: 10.24.1
NPM: 6.14.12
SSL Provider: Let'sEncrypt (Certbot 0.40.0)
I have the following ports open from the EC2 Management Console:
80/custom anywhere (http)
443/custom anywhere (https)
22/custom my IP (ssh)
3000/Custom my IP (npm start default port)
I have also allocated an Elastic IP to my machine, let's say it's 1.1.1.1 .
My Nginx config file is located at:
/etc/nginx/sites-enabled
and is called: client-config
I have set up my Nginx config to look like this:
server {
server_name 1.1.1.1 example.com www.example.com; # 1.1.1.1 this is an example ip
root /home/ubuntu/app-deploy/build;
index index.html; # react by default generate the file in the build directory
location / {
try_files $uri $uri/ =404;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = www.example.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = example.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
server_name 1.1.1.1 example.com www.example.com; # 1.1.1.1 this is an example ip
return 404; # managed by Certbot
}
Running nginx -t returns:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful