VUE 和 React 混用导致 TSX 报错的原因

I tried a demo in an existing project. This project is not a pure React project, and I'm not very familiar with React.
I created a TSX file with the code as follows：

import toast, { Toaster } from 'react-hot-toast';
import * as React from "react";
import * as ReactDOM from "react-dom/client";

export class HotToast {
  public readonly root: any;
  constructor(props: {
    id: string;
  }) {
    this.root = ReactDOM.createRoot(document.getElementById(props.id));
    this.root.render(<><Toaster /></>)
  }

  public alert(message: string, options?: any) {
    toast(message, options);
  }
}

Then an error is reported, and the information is shown in the figure：

I tried modifying the index.d.ts file for react-hot-toast to declare const Toaster: react. FC<ToasterProps>; Comment out, change to：

// declare const Toaster: react.FC<ToasterProps>;
declare const Toaster: React;

The error disappeared, and it can be used normally in my project, everything goes well. But I think this is not elegant, so how can I write a non-error code without modifying the react-hot-toast code? I wrote in accordance with the official example.
Here are some of my package.json information：

"devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/runtime": "^7.20.13",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.50.0",
    "@typescript-eslint/parser": "^5.50.0",
    "eslint": "^8.33.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "webpack": "^5.75.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "react-hot-toast": "^2.4.0"
  }

And tsconfig.json information：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": false,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react-jsxdev",
    "lib": ["ES2022","DOM","DOM.Iterable"],
    "outDir": "./dist/",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "./src/types",
      "node"
    ]
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ],
}

我已找到罪魁祸首：

The official example reports an error · Issue #267 · timolins/react-hot-toast (github.com)