http-proxy-middleware not working on Heroku - reactjs

Question

I made a front end SPA with create-react-app. I implemented http-proxy-middleware to solve CORS issues with api calls to https://api.deezer.com. The proxy works flawlessly locally, but it fails to add the headers after deploying to Heroku and the res.data from the api calls is undefined in the console.
Here is my setupProxy.js in my /src folder.
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
proxy("/chart", {
target: "https://api.deezer.com",
changeOrigin: true
})
)
app.use(
proxy("/artist", {
target: "https://api.deezer.com",
changeOrigin: true
})
)
app.use(
proxy("/search", {
target: "https://api.deezer.com",
changeOrigin: true
})
)
app.use(
proxy("/album", {
target: "https://api.deezer.com",
changeOrigin: true
})
)
}
And my api calls look like this (one example):
getTopHits() {
return(
axios.get('/chart')
)
}
And here is my package.json:
{
"homepage": "https://secret-hamlet-05097.herokuapp.com/",
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.21.1",
"fetch-jsonp": "^1.1.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"dev": "react-scripts start",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.1.0",
"http-proxy-middleware": "^0.19.1"
}
}
What could be wrong?