Не срабатывает onClick в React 17

Начал писать проект в React 17, но столкнулся со странной проблемой не работает onClick. В React 16 всё отлично, а в 17 не реагирует на нажатие.

Читал в статье что

...поменяли внутреннее устройство привязки событий в React 17.

В React 17 событие больше не привязывается на уровне document. Вместо этого React привязывает его к контейнеру DOM, в котором отрисовывается ваше React-дерево.

но мне это не помогло...

index.js

import React from 'react';
import ReactDOM from 'react-dom';

// Components
import App from './client/app.jsx';

ReactDOM.render(
  <App />, document.querySelector(`#root`)
);

app.jsx

import React from 'react';

const App = () => {

  const handleClick = () => {
    console.log(`CLICK`);
  }

  return (
    <>
      <div
        style={{backgroundColor: `#ccc`, cursor: `pointer` }}
        onClick={handleClick}
      >
        Click here
      </div>
    </>
  )
};

export default App;

Собираю webpackом

import HtmlWebpackPlugin from 'html-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';

import path from 'path';
import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const outputDirectory = 'dist';


export default {
  entry: {
    main: path.resolve(__dirname, `./src/index.js`)
  },
  output: {
    path: path.join(__dirname, outputDirectory),
    filename: `bundle.js`,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: `babel-loader`,
        }
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          {
            loader: `style-loader`
          },
          {
            loader: `css-loader`,
          },
          {
            loader: `sass-loader`,
          }
        ]
      },
      {
        test: /\.(jp(e*)g|png|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.svg$/,
        use: [`@svgr/webpack`],
      }
    ]
  },
  resolve: {
    extensions: [`*`, `.js`, `.jsx`, `.json`, `.css`, `.ts`, `.tsx`]
  },
  devServer: {
    port: 3000,
    open: true,
    historyApiFallback: true,
    proxy: {
      '/api': 'http://localhost:8080'
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: `Осьминожки`,
      template: './public/index.html',
      favicon: './public/img/favicon.png'
    })
  ]
}

Подскажите пожалуйста, что я сделал не так? Может что-то лишнее установил?

https://github.com/Slav4ik888/octopuses