[React]googleカレンダーとの連携においてlistUpcommingEventが複数回実行される

前提・実現したいこと

gapiを使ってgoogleカレンダーとの連携を考えています。
その際に、サンプルプログラムがclassコンポーネントだったため、funcitionコンポーネントに書き換えました。
この時、「event nothing」がコンマ何秒おきに出力されてしまいます。
読み込み時に一回だけ処理が走るようにしたいです。
classコンポーネントの時には一回だけだったのですが、functionコンポーネントに書き換えるとこのようになりました。
原因がわかる方がいましたらコメントお願いします。

google calendar api 公式ドキュメント
https://developers.google.com/calendar/quickstart/js

発生している問題・エラーメッセージ

event nothingがコンマ何秒おきに出力される

該当のソースコード

変更前

componentDidMount() {
    window.gapi.load("client:auth2", () => {
      window.gapi.client
        .init({
          apiKey: "",
          clientId: "",
          scope: "",
          discoveryDocs: [""],
        })
        .then(() => {
          const auth = window.gapi.auth2.getAuthInstance();

          this.setState({ isSignedIn: auth.isSignedIn.get() });
          this.listUpcomingEvents(); 
        });
    });
  }

変更後

sample
1const listUpcomingEvents = () => {
2    window.gapi.client.calendar.events
3      .list({
4        calendarId: "primary",
5        timeMin: new Date().toISOString(),
6        showDeleted: false,
7        singleEvents: true,
8        maxResults: 10,
9        orderBy: "startTime",
10      })
11      .then((response) => {
12        const events = response.result.items;
13
14        // 省略
15        } else {
16          console.log("event nothing"); //該当箇所
17        }
18      });
19  };
20
21  useEffect(() => {
22    window.gapi.load("client:auth2", () => {
23      window.gapi.client
24        .init({
25          apiKey: "",
26          clientId: "",
27          scope: "",
28          discoveryDocs: [""],
29        })
30        .then(() => {
31          const auth = window.gapi.auth2.getAuthInstance();
32
33          setIsSignedIn({ isSignedIn: auth.isSignedIn.get() });
34          listUpcomingEvents(); //該当箇所
35        });
36    });
37  });