Express API endpoint routes return 404 when deployed to Heroku, work locally

Trying to make a simple React + Express site and get it deployed to Heroku is proving to be quite the tricky task. The set ups that work on my local machine are:

1. Method 1: I run npm start in the root directory, followed by npm start in the client directory with a proxy in the client's package.json pointing to the server address/port.

2. Method 2: I run npm run build in the client directory and only run npm start in the root directory. (to test this I removed the if statement that checks for production so it would run in development)

Both of these methods work fine on my local machine, however when I deploy to heroku, I consistently get a 404 error when trying to navigate to /api, my server endpoint. I've seen a bunch of posts on SO about this issue and tried every suggestion I read to no avail.

Server index.js

const express = require("express");
const PORT = process.env.PORT || 8080;
const app = express();
const path = require('path');
const cors = require('cors')
app.use(cors())

// API
const router = require('./router/index');
app.use("/api", router);

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "client", "build")))
      
  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"));
  });
}

app.listen(PORT, () => {
  console.log(`app listening on ${PORT}`)
})

Server package.json

{
  "name": "ltb_calculator",
  "version": "1.0.0",
  "description": "An application for calculating interest for the Lifestyle Trading Bot on Telegram",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "install": "cd client && npm install",
    "build": "cd client && npm run build",
    "test": "mocha"
  },
  "engines": {
    "node": "^16.2.0"
  },
  "author": "Sonny Parlin",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "http-proxy-middleware": "^2.0.0",
    "mocha": "^9.0.0",
    "query-string": "^7.0.0",
    "react-fetch-hook": "^1.8.5",
    "react-json-view": "^1.21.3"
  }
}

Client package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

The entire project is on github, here. Judging by the number of questions about this on SO, many people are running into this for many different reasons. Thanks in advance for any insight.