react is not defined when building for production

I am building an app with react-native (iOS/Android) and react-native-web for the web.

I am trying to deploy the final app on my server but the generated files (index.html & main.js) are not displaying anything and in the console I have this error:

Uncaught ReferenceError: react is not defined

Here is my index.js

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {rootTag: document.getElementById('root')});

Here is my webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
  externals: {
    "react-native": true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules\/(?!()\/).*/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
                encoding: 'base64'
            }
          }
        ]
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
     }),
  ],
  devServer: {
    historyApiFallback: true,
    contentBase: "./",
    hot: true,
  },
}

Here is my package.json

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "react-scripts start",
    "start": "react-native start",
    "test": "jest --coverage",
    "lint": "eslint .",
    "build-web": "webpack --mode production"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "babel-loader": "8.1.0",
    "expo-linear-gradient": "^8.4.0",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "http-proxy-middleware": "^1.0.6",
    "react": "16.13.1",
    "react-dom": "^17.0.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-web": "^0.14.10",
    "react-native-web-linear-gradient": "^1.1.1",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "svg-url-loader": "^7.1.1",
    "url-loader": "^4.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-syntax-flow": "^7.12.1",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-scripts": "^4.0.1",
    "react-test-renderer": "16.13.1",
    "webpack-cli": "4.5.0"
  },
  "jest": {
    "preset": "react-native",
    "collectCoverage": true,
    "coverageReporters": ["html"]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

To generate the output file, I use the command yarn run build-web But when I open the index.html on google chrome, it displays nothing on I have the following error on my console : Uncaught ReferenceError: react is not defined

I am also using react-navigation if it changes anything

Any help would be welcome !