Babel loader not compiling jsx in modules even when specified in include paths

I have a custom react + webpack + babel + typescript setup for a simple react application that consumes some component from other packages.

File structure

src 
  components/**
  index.ts
docs
  index.ts > importing files from src and packages from @conn.

I have webpack config as

const path = require("path");
const outDir = path.resolve(__dirname, "docs");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const includePaths = [
  path.join(__dirname, "docs"),
  path.join(__dirname, "src"),
  path.join(require.resolve("@conn")
];

const exportObj = {
  entry: [path.join(__dirname, "/docs/index.tsx")],
  mode: "development",
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    alias: {
      react: path.resolve("./node_modules/react"),
    },
  },
  devtool: "source-map",
  output: {
    path: outDir,
    filename: "main.js",
    chunkFilename: "[name].chunk.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "docs/index.html",
    }),
  ],
  devServer: {
    port: 3030, // you can change the port
  },
  module: {
    rules: [
      {
        test: /.jpe?g$|.gif$|.png$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name].[ext]",
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /.css$/i,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
        ],
        include: includePaths,
        exclude: /node_modules/,
      },
      {
        test: /.(js|jsx|ts|tsx)$/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
        include: includePaths,
      },
      {
        test: /.woff2?(?v=d+.d+.d+)?(?[dA-z]{6})?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/font-woff",
            },
          },
        ],
        include: includePaths,
      },
      {
        test: /.ttf(?v=d+.d+.d+)?(?[dA-z]{6})?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/octet-stream",
            },
          },
        ],
        include: includePaths,
      },
      {
        test: /.eot(?v=d+.d+.d+)?(?[dA-z]{6})?$/,
        use: ["file-loader"],
        include: includePaths,
      },
      {
        test: /.svg(?v=d+.d+.d+)?(?[dA-z]{6})?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "image/svg+xml",
            },
          },
        ],
        include: includePaths,
      },
    ],
  },
};
module.exports = exportObj;

babel.config.js

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-typescript",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "react-hot-loader/babel"
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    ["@babel/preset-typescript"]
  ]
}

I am getting below error while running the build

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:Usersdingolegitconfiguration-componentsnode_modules@connURLToProps.jsx: Unexpected token, expected "," (34:24)

  33 |       const { Component } = this;
> 34 |       return <Component {...props} />;
     |                         ^
  35 |     }
  36 |   }
  37 |   return URLToProps;

I tried installing babel react preset and all the required babel plugins but the issue still persist.