CRA unable to build due to eslint import/no-webpack-loader-syntax

I am unable to build my Create-React-App due to Unexpected '!' in 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax. I want to know why does it happen and how can I fix it?

I am building a React project with React Map GL. Due to the transpiling issue of Mapbox GL version 2.0+ (related here: https://github.com/mapbox/mapbox-gl-js/issues/10173), one of the workarounds suggests that adding a worker-loader to the project.

However, even using the eslint-disable-next-line comment, I am still getting the build error.

Here is the code snipet where I am using the worker-loader

import mapboxgl from 'mapbox-gl';
// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass =
  require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

Here is my eslint config file:

{
  "env": {
    "browser": true
  },
  "extends": [
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": ["react-hooks", "react", "import"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "linebreak-style": ["error", "windows"],
    "react/prop-types": 0,
    "import/no-webpack-loader-syntax": "off"
  }
}