Simple React/Heroku site not working when deployed, but works locally

Question

When running this site locally, no problem. I have my server/client in different folders and the server is set to update the database on Heroku. I have one simple input on the front end which is to add a name to the database. When I enter and submit, it updates the database on heroku no problem. I can see the update in MySQL Workbench.

I then uploaded my backend to heroku and I'm not getting any error messages in the heroku log and the site has the "cannot get /" message as expected.

I updated the url on the frontend for the post and still run the frontend locally but when I test it, it does not update the database. Here are some quick snippets:

frontend function onSubmit: const addClient = () => {

Axios.post("https://***my-project***.herokuapp.com/create", { name: name }).then(
      (response) => {
console.log(response)
      }
    );
  };

and on the backend:

app.post("/create", (req, res) => {
const name = req.body.name;
db.query("INSERT INTO clients (name) VALUES (?)", [name], (err, result) => {
if (err) {
console.log(err);
    } else {
res.send("Database Updated");
    }
  });
});
app.listen(process.env.PORT || 3001, () => {
console.log("we are up and running");
});

Any obvious reason why this wouldn't work? When I run the heroku logs, it's showing the request came through with a 204 status.

I went through all of the possible solutions from this thread with no luck.

thanks!