My site is deployed on Render but I am having issues with my server/database calls once deployed

Question

This is my first time deploying a full-stack application and I am not sure how to fix this issue.

I have deployed my app on Render and it is deploying successfully for the client side. It is the server side I am having issues with. In my local machine environment I was making server calls like this

helper function:

import axios from 'axios';
const usersRoute = process.env.REACT_APP_SERVER + ":" + process.env.REACT_APP_SERVER_PORT + "/users";


export default async function getAllUsers() {
  const { data } = await axios.get(usersRoute);
  // setData(data);
  // console.log('users data:', data);
      // setUsers(data);
      // return usersList;
      return data;

};

environment variables:

REACT_APP_SERVER=http://localhost
REACT_APP_SERVER_PORT=8000

server file:

// Get all users
app.get("/users", (req, res) => {
  db.query("SELECT * FROM users", (error, results) => {
    if (error) {
      throw error;
    }
    res.status(200).send(results.rows);
  });
});

This works in my local machine environment of course, but when I put it all into Render, it was still making the calls to my local environment, so it's only working on my computer. I am not sure how to exactly fix it.

In my localhost environment, the client side is running on "localhost:3000/" and the server was running on "localhost:8000/"

I have tried changing it so it is just using /plants as the path, which failed when put together with the deployed application URL, I have tried different variables, and seeing if I could get it to run off of the main URL in my localhost environment but that also failed.

I am just really turned around and confused right now, so any help would be appreciated.