'SocketClient is not a constructor' in react-refresh-webpack-plugin

I have a typescript react project where I try to add the react-refresh-webpack-client and get this error:

my webpack config:

import HtmlWebpackPlugin from 'html-webpack-plugin';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import ReactRefreshTypeScript from 'react-refresh-typescript';
import { HotModuleReplacementPlugin } from 'webpack';

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"]
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()],
    splitChunks: {
      chunks: 'all'
    }
  },
  mode: isDevelopment ? 'development' : 'production',
  devServer: {
    port: process.env.WEBPACK_PORT,
    historyApiFallback: true,
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              getCustomTransformers: () => ({
                before: isDevelopment ? [ReactRefreshTypeScript()] : [],
              }),
              // `ts-loader` does not work with HMR unless `transpileOnly` is used.
              transpileOnly: isDevelopment,
            },
          },
        ],
      },
      { enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'source-map-loader'
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './client/index.html',
      filename: './index.html',
    }),
    isDevelopment && new HotModuleReplacementPlugin(),
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ],
  entry: {
    main: ['./client/index.tsx'],
    vendor: ['lodash', 'react', '@material-ui/core'],
  },
  devtool: 'source-map'
};

here is my tsconfig file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "jsx": "react",
    "strict": true,
    "alwaysStrict": true,
    "noImplicitReturns": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules"
  ]
}

I already removed react-hot-loader from my code. can't find any example of react-refresh with typescript, what am I missing? what could be my problem? thank you!

1. I would use export default { instead of module.exports = {
2. You need to use the latest refresh plugin (0.5.0), explanation is in this issue.