Lint throwing errors for optional chaining only when running npm script

Question

I have currently added optional chaining capability to my React project.

This is now working fine when I run my project.

But when I perform npm run lint, it still complains Unexpected token for following syntax.

const myVar = value1?.value2?.value3;

I believe it has to do with my lint script inside package.json file which is as follows.

"lint": "eslint --ignore-path .eslintignore --ext js,jsx,snap,md .",

Is there something I need to modify here?

The following are the changes I had to do to be able to use optional chaining. Please advice.

Inside .babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

Inside .eslintrc

{
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2020
  }
}

Inside package.json

  "devDependencies": {
    .... others
    "@babel/plugin-proposal-optional-chaining": "^7.16.7", // added
    "babel-eslint": "^10.1.0", // added
    "eslint": "^7.5.0", // updated version
    "eslint-plugin-babel": "^5.3.0", // added
  },

For reference, these are most of the scripts inside my package.json file.

  "scripts": {
    ... other scripts
    "prebuild": "npm run clean",
    "build": "--clientConfig webpack/client.config.js --serverConfig webpack/server.config.js",
    "clean": "rimraf build",

    "lint": "eslint --ignore-path .eslintignore --ext js,jsx,snap,md .",
    
    "test:unit": "jest --testPathIgnorePatterns browser a11y",
  },