React is not defined when i call

Question

Need help!!!

I try to use tinode in my project, I install it with npm i tinode-webapp as follow https://www.npmjs.com/package/tinode-webapp When i call it with < TinodeWeb />, it give me error React is not defined.

Here my code

import React from 'react';
import './App.css';
import TinodeWeb from 'tinode-webapp';

function App() {
  return (
    // <div className="App">
    <TinodeWeb />
    // </div>
  );
}

export default App;

My webpack.config.js

    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loaders: [
            'babel-loader',
          ],
          exclude: /node_modules/,
        },
      ],
    },
    output: {
      path: path.resolve(__dirname, 'umd'),
      filename: `[name].${mode}.js`,
      publicPath: '/umd/'
    },
    optimization: {
      minimizer: [
        // we specify a custom UglifyJsPlugin here to get source maps in production.
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          uglifyOptions: {
            compress: true,
            mangle: true
          },
          sourceMap: true
        })
      ]
    },
    performance: {
      maxEntrypointSize: 262144,
      maxAssetSize: 262144
    },
    plugins: [
      new CopyPlugin([
        { from: `node_modules/tinode-sdk/umd/tinode.${mode}.js`, to: `tinode.${mode}.js` },
      ]),
      new webpack.ProvidePlugin({
        "React":"react",
      }),
    ],
    externals: {
      'react': 'React',
      'react-dom': 'ReactDOM',
      'react-intl': 'ReactIntl',
      'firebase/app': 'firebase',
      'firebase/messaging': ['firebase', 'messaging'],
      'tinode-sdk': 'Tinode',
    },
  };
}

My error

Did I make a mistake?