API request returns index.html upon refreshing heroku app instead of UI

Question

I deployed a PERN stack to Heroku and it is working fine if I am just navigating by clicking the components, but when I refresh the page e.g. "https://birdex.herokuapp.com/species/Red-crested%20turaco", I no longer see the page content, just the API information.

This is the url for my deployed app: https://birdex.herokuapp.com/

I understand that I may have the same endpoints in my react router component as well as the in the server but I have tried adding "/api/{endpoints}" for every api request in my server side and this instead result in 304 error. I have to delete the "/api" in order for it to work.

How can I solve this? Thanks!

server.js

app.get("/species/:name", async (req, res) => {
  try {
    const { name } = req.params;
    const familyId = await pool.query(advance_query, [name]);

    res.json(familyId.rows);
  } catch (err) { 
    console.log(err.message);
  }
});

... 

if (process.env.NODE_ENV === "production") {
  //server static content
  //npm run build
  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(`server has started on port ${PORT}`);
});

index.js (client)

const [family, setFamily] = useState("");

  useEffect(() => {
    const getFamily = async () => {
      try {
        const response = await fetch(`/species/${match.params.name}`);
        const jsonData = await response.json();
        setFamily(jsonData[0]);
      } catch (err) {
        console.log(err);
      }
    };
    getFamily();
    setNewDescription(family.speciesdesc);
    setNewImg(family.speciesimg);
  }, [match.params.name]);

App.js (contains all the routes)

function App() {
  return (
    <Router history={customHistory}>
      <Switch>

        <Route exact path='/'>
          <HomePage/>
        </Route>

        {/* Only when u use this format component={} then the params can be pass down */}
        <Route exact path ='/species/:name' component={SingleSpeciesPage}/>
        
        <Route exact path ='/birds/:name/:birdsid' component={SingleBird}/>

        <Route exact path = '/birds/:birdName/:birdsid/:species_name/entries' component={EntriesPage}/>
      </Switch>
    </Router>
  );
}