React JS ne prend pas en charge la fonction de flèche (syntaxe ES6)

Je construis un projet React JS. Dans mon projet, j'utilise les fonctions fléchées qui sont la nouvelle syntaxe ES6. Mais cela génère une erreur lorsque je lance le projet. J'utilise Webpack pour compiler mon code.

Ceci est mon fichier webpack.config.js.

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\Acer\Desktop\way-ui-react\node_modules\babel-preset-es2015\lib\index.js

J'ai un fichier .babelrc directement dans le dossier racine du projet avec le contenu suivant.

addBackDrop = e => {
        if(this.state.showDatePicker && !ReactDOM.findDOMNode(this).contains(e.target)) {
            this.showDatePicker(false);
        }
    }

Dans un composant React, je déclare une fonction de flèche comme suit.

{
  "presets": [
    "es2015", "react",
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

La fonction est dans le composant de classe.

Quand je lance "npm run dev", j'obtiens l'erreur suivante.

const HTMLWebPackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: [ 'babel-polyfill', './src/index.js' ],
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    plugins: [
        new HTMLWebPackPlugin({ template: path.join(__dirname, '/build/index.html') })
    ],
    devServer:{
        port:5200
    }
};

Quel est le problème avec ma configuration et comment puis-je y remédier?