Как правильно настроить webpack для react-router-dom?

Question

[Maxim011]

Как правильно подключить react-router-dom к моему сайту? Т.к страница /Catalog отображается только тогда, когда в коде напрямую вставлен тег как в строке после < /Routes> .Иначе (если оставить только в route) просто пустая страница.

import React from "react";
import styles from "./App.module.scss";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Catalog from "./page/catalog/Catalog";

function App() {
  return (
    <div className={styles.App}>
      <BrowserRouter>
        <Routes>
            <Route
              path={"/Catalog"}
              element={<Catalog></Catalog>}
            ></Route>
        </Routes>
        {/* <Catalog></Catalog> */}
      </BrowserRouter>
    </div>
  );
}
export default App;

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: { 
      filename: path.resolve(__dirname, "src/index.tsx") 
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name][contenthash].js',
        clean: true,
    },
    module: {
        rules: [
            { test: /\.(html)$/, use: ['html-loader'] },
            {
              test: /\.(js|jsx)$/,    
              exclude: /node_modules/,
              use: ["babel-loader"],
            },
            {
              test: /\.tsx?$/,
              use: 'ts-loader',
              exclude: '/node_modules/'
            },
            {
              test: /\.(module.scss|scss)$/,
              use: [
                { 
                  loader: "style-loader",
                },
                { 
                  loader: "css-loader",
                  options: {
                    modules: true, 
                    url : false
                  },
                },
                { 
                  loader: "sass-loader",
                },
              ],
            },
            {
              test: /\.(png|jpe?g|gif|webp)$/i,
              use: [
                {
                  loader: 'file-loader',
                  options:{
                    name: '[name].[ext]',
                    outputPath: 'images'
                  }
                },
              ],
            },
        ],
    },
    resolve: {
      extensions: [".*", ".js", ".jsx", '.ts', '.tsx',],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Мир",
            filename: 'index.html',
            template: "./src/index.html",
        }),
    ],
    devServer: {
        port: 3002,
        hot: true,
        historyApiFallback: true,
        static:{
          directory: path.join(__dirname, 'dist')
        }
    },
    mode: 'development'
};

Использую для создания сайта Webpack + typescript + react