TypeScript エラー：You may need an appropriate loader to handle this file type

Question

前提

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

実現したいこと

npm run buildでビルドができるようにしたい。
buildを行うと以下のエラーが表示されます。

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

ERROR in ./src/App.js 14:6
Module parse failed: Unexpected token (14:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   render(){
|     return(
>       <AppProvider>
|         <Router>
|           <div>

該当のソースコード

module.exports = {
    mode: "development",
    entry: "./src/App.js",
    output: {
      path: `${__dirname}/build`,
      filename: "main.js"
    },
    module: {
      rules: [
        {
          // 拡張子 .ts もしくは .tsx の場合
          test: /\.tsx?$/,
          use: "ts-loader",
        }
      ]
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".json"]
    },
  };

試したこと

このエラーを調べた時にTypeScriptを処理するloaderが無いことが原因で「ts-loader」を設定することで解決できると出てきました。
ただ元々「ts-loader」はインストール済みで設定してあったので原因が分かりません。
エラーで矢印がある< AppProvider >はtsxファイルになります。
既存の設定が抜けている、追加の設定が必要などわかる方がいらっしゃればご教示いただけると大変助かります。
よろしくお願いいたします。