Debug React in non minified version

We have a rather large React project.

Currently when we try to debug it from browser like Chrome, it looks like the following.

!function(){var r,n,e=(n={}
,__webpack_require__.m=r=[function(e,t)
{e.exports=PropTypes},function(e,t)
{e.exports=React},function(e,t,r)
{"use strict";function _typeof(e)

Now this is just part of it and there are 1000s and 1000s of lines of this.

When I try to place breakpoints to debug, I end up with minified version like:

var a = b.l - c.m

Find it extremely unreadable and hard to determine which part of the code it is pointing to.

Is there a way, like a setting in package.json maybe.
Where I can set it such that when I am performing debug work, don't show minified version.
Instead show me the es6 code I have written.

I use Webstorm and somehow, it is so slow when I debug it from there and the breakpoint doesn't always hit even though I am clearly passing the breakpoint.
Thus very unreliable.

Appreciate any help/advice. How to effectively debug a React project?
Is there a way I could add settings to not minify during debug? (localhost and production)

-- UPDATE --

package.json

{
  "name": "myproj",
  "version": "1.00.0",
  "license": "SEE LICENSE IN LICENSE",
  "scripts": {
    "start": "npm run build && one-run --env domain.com",
    "prebuild": "npm run clean",
    "build": "rimraf build && bundle-shop-app --clientConfig webpack/client.config.js --serverConfig webpack/server.config.js",
    "clean": "rimraf build",
    "lint": "eslint --ignore-path .eslintignore --ext js,jsx,snap,md .",
    "prepare": "npm run build",
    "pretest:browser": "npm run build",
    "test:unit": "jest --testPathIgnorePatterns browser a11y",
    "test:a11y": "jest a11y --collectCoverage false",
    "test": "npm run test:unit",
    "posttest": "npm run lint",
    "watch:test": "npm run test:unit -- --watch",
    "watch:build": "npm run build -- --watch",
    "githook:pre-commit": "npm run test",
    "githook:commit-msg": "commit-msg"
  },
  "deploy": {
    "from": "storybook-static",
    "to": "static",
  },
  "one": {
    "runner": {
      "module": [
        "."
      ],
      "envVars": {
        "KEY": "root"
      }
    },
    "risk": {
      "level": "low"
    }
  },
  "jest": {
    "preset": "jest-preset-react",
    "setupFiles": [
      "./test-setup.js"
    ]
  },
  "dependencies": {
    "classnames": "2.2.6",
    "css-loader": "2.1.1",
    "focus-visible": "^5.0.2",
    "immutable": "^3.7.6",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "^16.14.0",
    "react-helmet-async": "^1.0.4",
    "react-intl": "^2.2.3",
    "react-redux": "^7.0.0",
    "react-router": "^3.0.0",
    "react-swipeable": "5.5.1",
    "redux": "^4.0.0",
    "reselect": "^4.0.0",
    "style-loader": "^2.0.0"
  },
  "devDependencies": {
    "@babel/polyfill": "^7.4.4",
    "babel-preset-amex": "^3.0.0",
    "concurrently": "^6.0.0",
    "enzyme": "^3.3.0",
    "enzyme-to-json": "^3.3.0",
    "eslint": "^6.0.0",
    "eslint-config-amex": "^11.0.0",
    "githook-scripts": "^1.0.1",
    "jest": "^24.0.0",
    "jest-image-snapshot": "^4.0.0",
    "markdown-spellcheck": "^1.3.1",
    "react-dom": "^16.14.0",
    "react-test-renderer": "^16.14.0",
    "underscore": "^1.9.1"
  },
  "publishConfig": {
    "registry": ""
  }
}

These are 3 files all inside webpack folder.

base.config.js

const oneMegabyte = 10000000;

module.exports = {
  resolve: {
    symlinks: false,
  },
  performance: {
    maxEntrypointSize: oneMegabyte,
    maxAssetSize: oneMegabyte,
  },
};

client.config.js

const path = require('path');
const { cssLoader, sassLoader } = require('domain-cli/webpack/configs');
const base = require('./base.config');
const { name } = require('../package.json');

module.exports = {
  ...base,
  module: {
    rules: [
      {
        test: /\.s?css$/,
        include: [
          path.join(__dirname, '../src'),
          path.join(__dirname, '../node_modules'),
        ],
        oneOf: [
          {
            resource: /domain-components/,
            use: [
              { loader: 'style-loader' },
              { loader: 'css-loader' },
              sassLoader(),
            ],
          },
          {
            use: [
              { loader: 'style-loader' },
              cssLoader({ name }),
              sassLoader(),
            ],
          },
        ],
      },
    ],
  },
};

server.config.js

const path = require('path');
const { cssLoader, sassLoader } = require('domain-cli/webpack/configs');
const base = require('./base.config');
const { name } = require('../package.json');

module.exports = {
  ...base,
  module: {
    rules: [
      {
        test: /\.s?css$/,
        include: [
          path.join(__dirname, '../src'),
          path.join(__dirname, '../node_modules'),
        ],
        oneOf: [
          {
            resource: /domain-components/,
            use: [
              {
                loader: 'bundler/webpack/ssr-css-loader', options: { name },
              },
              { loader: 'css-loader' },
              sassLoader(),
            ],
          },
          {
            use: [
              {
                loader: 'bundler/webpack/ssr-css-loader', options: { name },
              },
              cssLoader({ name }),
              sassLoader(),
            ],
          },
        ],
      },
    ],
  },
};