Deployment with Heroku and React/Rails with Webpack

I am currently working on an app that uses react as front-end and rails as back-end, all of this using webpack. I have decided to deploy my app using Heroku, but I came to some troubles. My production front-end is awful, but my backend API works just fine (the requests in the production are made correctly.). The app runs correctly locally.

This is the link from my Heroku app: https://andrei-tocu-jogging-app.herokuapp.com/

This is my package.json:

{
  "name": "jogging-app",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.12.10",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "ajax-request": "^1.2.3",
    "antd": "^4.11.1",
    "axios": "^0.21.1",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "jquery": "^3.5.1",
    "node-fetch": "^2.6.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  },
  "engines": {
    "yarn": "1.22.4"
  }
}

I have also tried to run these commands to install the dependencies:

heroku run bundle install

heroku run yarn install

Is there a proper configuration to deploy the application when using react webpack?