blank map with gray background while using react-map-gl in production build (even after trying all 3 solutions from mapbox official)

I am not able to display map properly in production, while using react-map-gl in create-react-app. App is working fine on localhost but it throws errors in the console while running in production.
I have tried all the 3 solutions mentioned in official mapbox docs https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

I first tried these solutions one by one separately, and then all 3 solutions simultaneously, but none of these 4 attempts worked.

I have attached the screenshot of console errors below along with live URL of my production site and github code.

Live URL: https://parking-app-fyp.vercel.app
github code: https://github.com/iAmZubair00/parking-app-fyp

screenshot of console error

I am also adding 3 pieces of code related to 3 solutions for your convenience

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

module.exports = {
  babel: {
    loaderOptions: {
      ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"],
    },
  },
};

"browserslist": {
    "production": [
      ">0.2%, not dead, not ie 11, not chrome < 51, not safari < 10",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }