Can't deploy full stack MERN project on render - reactjs

Question

I am trying to deploy full stack MERN app from one github repository on render.com. After deploying, my front end and back end work individullay fine but they don't work together. For examle, if I send GET request from Postman to deployed back-end I get data as a response but from front-end static site I don't get any response.
I created Static Site and Web Service connecting a single github repo that contain my front-end and back-end. When deploying back-end console show this error
This is my file structure:
Render Web Service setup:
Name: support-desk-api
Branch: main
Root Directory: e.g. src (Default)
Build Command: yarn (Default)
Start Command: npm run dev
Render Static Site setup:
Name: support-desk
Branch: main
Root Directory: e.g. src (Default)
Build Command: npm run render-postbuild
Publish directory: ./client/build
package.json of root
{
"name": "support-desk",
"version": "1.0.0",
"description": "support ticket app",
"main": "server.js",
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"render-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"author": "Arifur Rahaman",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"concurrently": "^7.5.0",
"dotenv": "^16.0.1",
"express": "^4.18.1",
"express-async-handler": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.3.4"
},
"devDependencies": {
"nodemon": "^2.0.16"
}
}
package.json of client
{
"name": "frontend",
"version": "0.1.0",
"proxy": "http://localhost:5000",
"private": true,
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.8.2",
"#reduxjs/toolkit": "^1.8.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.2.0",
"axios": "^0.27.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "^4.4.0",
"react-modal": "^3.15.1",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.0.3",
"toastify": "^2.0.1",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
server.js
const express = require('express')
const dotenv = require('dotenv').config()
const { errorHandler } = require('./middleware/errorMiddleware')
const connectDB = require('./config/db')
const PORT = process.env.PORT || 5000;
connectDB()
const app = express()
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use('/api/users', require('./routes/userRoutes'))
app.use('/api/tickets', require('./routes/ticketRoutes'))
//* Serve static assets in production, must be at this location of this file
if (process.env.NODE_ENV === 'production') {
//*Set static folder
app.use(express.static('client/build'));
app.get('*', (req,res) => res.sendFile(path.resolve(__dirname, 'client', 'build','index.html')));
}
app.use(errorHandler)
app.listen(PORT, () => { console.log(`Server is running at ${PORT}`) })
Any help would be appreciated