React and Node app deployed on Azure web app shows JSON result instead of HTML page

I have a react app with node backend. I deployed it to Azure Web app , everything works fine.

When i open the url, i can see the application getting loaded and the data from the node app also getting fetched and displayed on the front end.

But when the user navigates to certain routes, it shows JSON which is served by the Node backend rather than a web page that should be displayed

Server.JS

import express from 'express';
import path from 'path'

import dotenv from "dotenv";

dotenv.config();

/* Create an Express application.*/
const app = express();
const __dirname = path.resolve();
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

routes.forEach(route => {
    app[route.method](route.path, route.handler);
});
if (['production'].includes(process.env.NODE_ENV)) {
    const root = path.join(__dirname,'..', 'client', 'build')
    app.use(express.static(root));
    console.log(root);
    app.get("*", (req, res) => {
        res.sendFile('index.html', { root });
    })
}
const dBConnectionString = process.env.CON_STRING|| "";
const PORT = process.env.PORT || 8080;

db.connect(dBConnectionString)
    .catch(err => {
        console.error(err.stack);
        process.exit(1)
    })
    .then(app.listen(PORT, () => {
        console.log(`Server is running on port ${PORT}`);
    }));

And the react app is deployed inside the wwwroot/site/client/build folder. I am using PM2 command as a startup command to run the app,

pm2 start ecosystem.config.js --no-daemon

and ecosystem.config.js

module.exports = {
    apps: [{
        name: "node",
        script: "./server.js",
        cwd: "/home/site/wwwroot/server/"
    }
   ]
}

when i access this url https://web.azurewebsites.net/books/60ea9a3caffa68e153835489 it return a json where it should show a web page.

Should i run the the node app and react app in different ports? how to configure that in pm2?