Heroku: json data displayed instead of UI - node.js

Question

My app works locally but once deployed to Heroku, every page works except the home page where the json data is displayed instead of the UI. On this page, I am listing the posts from the db so the posts in the db are being displayed as json data.
I tried prepending post routes with '/post' to stop api returning html on '/' route but now I'm getting this problem. Whatever I change, it just keeps switching between these two issues - either json data is displayed or index.html is returned instead of data.
How can I fix this?
Thanks!
The route for that specific page (this is the first route):
<Route path="/posts/" exact component={Home} />
server.js
// imports
...
require("dotenv").config();
// import routes
const authRoutes = require("./routes/auth");
const userRoutes = require("./routes/user");
const postRoutes = require("./routes/posts");
// app
const app = express();
// connect db
const url = process.env.MONGODB_URI
mongoose.connect(url, {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true,
useFindAndModify: false,
});
mongoose.connection
.once("open", function () {
console.log("DB Connected!");
})
.on("error", function (error) {
console.log("Error is: ", error);
});
// middlewares
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", '*');
res.header("Access-Control-Allow-Credentials", true);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
next();
});
//middleware
...
// routes middleware
// app.use(express.static(path.join(__dirname, './client/build')))
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
}
app.use(authRoutes);
app.use(userRoutes);
app.use('/post', postRoutes);
app.get("/*", function (req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
const port = process.env.PORT || 80;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
ListPosts.js
// imports
...
import { API } from "../config";
class ListPosts extends React.Component {
state = {
title: "",
body: "",
date: "",
posts: [],
};
componentDidMount = () => {
this.getPosts();
};
getPosts = () => {
axios
.get(`${API}/post/`)
.then((response) => {
const posts = response.data;
this.setState({ posts });
})
.catch((error) => {
console.log(error);
});
};
displayPosts = (posts) => {
if (!posts.length) return null;
return posts.map((post, index) => (
...
));
};
render() {
return <div>{this.displayPosts(this.state.posts)}</div>;
}
}
export default ListPosts;
list route/controller
router.get("/", list);
exports.list = (req, res) => {
const sort = { title: 1 };
Post.find()
.sort(sort)
.then((posts) => res.json(posts))
.catch((err) => res.status(400).json("Error: " + err));
};