Internal HTTPS links not working when deployed React app to VPS

I build a React app locallythat has a simple login page, MongoDB on Cloud Atlas (remote) and a bunch of internal links once user is logged in like dashboard, analytics and other stuff).

Now I want to deploy it on VPS server (Ubuntu) and I set up the SSL all good but now I have to change all internal links from localhost:3000 as example to websitename.com (with https in front of course).

I am not sure how to handle this because once I do all that transition the login stops working (it authenticates me no matter what characters I put, it bypasses basically) and once I am inside there is no data or connection to the Node.js server (for retrieving analytics data from DB).

This is Nginx conf file.

server {    listen 443 ssl;    server_name vps-ipaddress mywebsite.com www.mywebsite.com;    ssl_certificate /pathtocertificate/fullchain.pem;    ssl_certificate_key /pathtocertificate/privkey.pem;    location /login {        proxy_pass http://vps-ipaddress:5000;        proxy_set_header Host $host;        proxy_set_header X-Real-IP $remote_addr;        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        proxy_set_header X-Forwarded-Proto $scheme;        # Additional SSL parameters for proxy        proxy_ssl_protocols TLSv1.2 TLSv1.3;        proxy_ssl_ciphers HIGH:!aNULL:!MD5;        proxy_ssl_verify off;  # Only use this for testing, not in production    }    location / {        proxy_pass http://vps-ipaddress:3000;        proxy_set_header Host $host;        proxy_set_header X-Real-IP $remote_addr;        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        proxy_set_header X-Forwarded-Proto $scheme;    }}

and this is my login component (a part of it)

    const Login = ({ onLogin }) => {  const [username, setUsername] = useState("");  const [password, setPassword] = useState("");  const [error, setError] = useState("");  const navigate = useNavigate();  const handleSubmit = async (e) => {    e.preventDefault();    try {      const res = await axios.post("https://mywebsite.com/login", {        username,        password,      });      localStorage.setItem("token", res.data.token);      onLogin();      navigate("/dashboard");    } catch (err) {      console.error("Error during login:", err);      setError(err.response?.data?.error || "Error during login");    }  };  return (<PageContainer><FormContainer><FormTitle>Login</FormTitle><form onSubmit={handleSubmit}><FormField><Label>Username</Label><Input              type="text"              value={username}              onChange={(e) => setUsername(e.target.value)}              required            /></FormField><FormField><Label>Password</Label><Input              type="password"              value={password}              onChange={(e) => setPassword(e.target.value)}              required            /></FormField>          {error && <ErrorMessage>{error}</ErrorMessage>}<Button type="submit">Login</Button></form><SwitchContainer><Link to="/register">Don't have an account? Register</Link></SwitchContainer></FormContainer></PageContainer>  );};