bundling a lit react component gives me error "Cannot read properties of null (reading 'useRef')"

Question

I made a module that contain a react lit component and bundled the module using webpack. The problem is it gives me this error Cannot read properties of null (reading 'useRef') when I use ReactDynamicIsland in a react-app. Honestly, I don't have a clue why this is happening so I will include all the parts of my code that I think might contain the problem

index.js

import React from "react";
import { createComponent } from "@lit/react";
import { DynamicIsland } from "./dynamic-island/DynamicIsland";
export const ReactDynamicIsland = createComponent({
  react: React,
  tagName: "dynamic-island",
  elementClass: DynamicIsland,
});

webpack.config.js

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: [{ loader: "css-loader", options: { url: false } }],
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".css"],
  },
  output: {
    filename: "index.js",
    libraryTarget: "umd",
    path: path.resolve(__dirname, "dist"),
  },
  stats: {
    errorDetails: true,
    children: true,
  },
  mode: "production",
  plugins: [
    new CopyPlugin({
      patterns: [{ from: "src/dynamic-island/assets", to: "dist/assets" }],
    }),
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "plugins": [{ "name": "typescript-plugin-css-modules" }, { "name": "css-modules-typescript-loader" }],
    "experimentalDecorators": true,
    "module": "CommonJS",
    "outDir": "dist/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*", "tests/**/*", "globals.d.ts"],
  "exclude": ["dist/**/*", "node_modules"]
}