React wont be loaded with Webpack 5, but in 4

I made a React Component Library, and it works great with Webpack 4. When I upgrade to Webpack 5 it still compiles, but it gives me some of these Warnings:

WARNING in ./src/index.tsx 6:24-35 export 'GridContent' (imported as 'GridContent') was not found in '@dlcm/dlcm-shared-modules' (module has no exports)

and in Browser Console throws this Error:

Uncaught TypeError: Cannot read property 'Component' of undefined

It tries to use React.Component Class to extend my Component, but

var React = __webpack_require__(/*! react */ "react");

gives back undefined.

// webpack.config from my library
const path = require('path');

module.exports = {
    optimization:{
        minimize: false, // <---- disables uglify.
        // minimizer: [new UglifyJsPlugin()] if you want to customize it.
    },
    entry: './src/index.ts',
    target: "web",
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },

    externals: {
        'react': {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react',
            umd: 'react',
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom',
            umd: 'react-dom',
        },
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        library: {
            name: 'DlcmLib',
            type: 'umd',
        }
    }
};

I export the Components in index.ts with

export { Button } from "./control/Button/Button";
...
...

Imported React in eg. Button like this:

import * as React from 'react';
import './Button.scss';

export class Button extends React.Component<any, any> {
...

Versions I used:

  "devDependencies": {
    "@types/react": "^17.0.8",
    "@types/react-dom": "^17.0.5",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.1",
    "http-server": "^0.12.3",
    "sass": "^1.34.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "ts-loader": "^9.2.2",
    "typescript": "^4.3.2",
    "webpack": "^5.38.0",
    "webpack-cli": "^4.7.0"
  },
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "@dlcm/dlcm-shared-modules": "^1.0.0",
    "babel-loader": "^8.2.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }

(works with webpack 4.46.0)

What do I do wrong?