npm run buildに失敗する(webpack)

前提

チャットアプリを開発しています。
使用しているものは以下になります。
・Node.js v14.17.0
・React.js v17.0.0
・Webpack v4.44.2
・Webpack-cli v4.7.2
・Firebase v8.10.0

実現したいこと

「npm run build」でビルドを行いたいのですが実行すると以下のエラーメッセージが表示されビルドができない状況になってしまっています。
このエラーを解決してビルドができるようにしたいです。

発生している問題・エラーメッセージ

 iMacBook-Air:my-app ***$ npm run build

> my-app@0.1.0 build /Users/***/Git/Portfolio/my-app
> webpack

[webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.target should be one of these:
   "web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload" | function
   -> Environment to build for
   Details:
    * configuration.target should be one of these:
      "web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload"
    * configuration.target should be an instance of function
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! my-app@0.1.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/***/.npm/_logs/2022-08-23T17_18_39_463Z-debug.log

該当のソースコード

webpack.config.jsのソースを載せます。

webpack.config.js
1module.exports = {
2    // モード値を production に設定すると最適化された状態で、
3    // development に設定するとソースマップ有効でJSファイルが出力される
4    mode: "development",
5
6    // メインとなるJavaScriptファイル（エントリーポイント）
7    entry: "./src/App.tsx",
8    // ファイルの出力設定
9    output: {
10      //  出力ファイルのディレクトリ名
11      path: `${__dirname}/build`,
12      // 出力ファイル名
13      filename: "main.js"
14    },
15    module: {
16      rules: [
17        {
18          // 拡張子 .ts もしくは .tsx の場合
19          test: /\.tsx?$/,
20          // TypeScript をコンパイルする
21          use: "ts-loader"
22        }
23      ]
24    },
25    // import 文で .ts や .tsx ファイルを解決するため
26    resolve: {
27      extensions: [".ts", ".tsx", ".js", ".json"]
28    },
29    target: ["web", "es5"],
30  };

package.jsonのscripts部分を抜粋しています。

package.json
1"scripts": {
2    "start": "react-scripts start",
3    "test": "react-scripts test",
4    "eject": "react-scripts eject",
5    "build": "webpack",
6    "watch": "webpack -w"
7  },