当我添加pdftron的WebViewer时，我收到此错误：

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array or one of the dependencies changes on every render.

我尝试了这两组代码，但总是相同的错误：

• 第一个：当我点击按钮：

import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";

const MyComponent = (): JSX.Element => {
  const viewer = useRef<HTMLDivElement>(null);

  const xx = () => {
    console.log("start");
    WebViewer(
      {
        path: "/webviewer/lib",
        initialDoc: "/files/pdftron_about.pdf",
      },
      viewer.current!
    );
    console.log("end");
  };

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <button onClick={xx}>here</button>
      <div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
    </div>
  );
};

export default MyComponent;

• 第二个：

import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";

const MyComponent = (): JSX.Element => {
  const viewer = useRef<HTMLDivElement>(null);

  useEffect(() => {
    console.log("start");
    WebViewer(
      {
        path: "/webviewer/lib",
        initialDoc: "/files/pdftron_about.pdf",
      },
      viewer.current!
    );
    console.log("end");
  }, []);

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
    </div>
  );
};

export default MyComponent;

它总是显示这个错误，我尝试使用网站上的代码，但问题是我没有找到使用Typescript的ReactJs的解决方案。