reactjs - React アプリで呼び出されない Microsoft Graph Toolkit コンポーネントのイベント ハンドラー

Question

React アプリで Microsoft Graph Toolkit のログイン コンポーネントを使用しようとしています。正常に動作しますが、イベントを発生させることができないようです。例えば ​​-

import React from "react";
import { MgtLogin, Providers, MsalProvider } from "@microsoft/mgt";
import "./App.css";

Providers.globalProvider = new MsalProvider({
  clientId: "a974dfa0-9f57-49b9-95db-90f04ce2111a"
});

function handleLogin() {
  console.log("login completed");
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <mgt-login loginCompleted={handleLogin} />
      </header>
    </div>
  );
}

export default App;

handleLogin呼び出されることはありません。

アップデート

これがフックでどのように機能するかです。

import React, { useEffect, useRef } from "react";
import { Providers, MsalProvider, LoginType } from "@microsoft/mgt";
import "./App.css";

Providers.globalProvider = new MsalProvider({
  clientId: "a974dfa0-9f57-49b9-95db-90f04ce2111a",
  loginType: LoginType.Popup
});

function App() {
  const loginComponent = useRef(null);

  useEffect(() => {
    console.log("loginComponent", loginComponent);
    loginComponent.current.addEventListener("loginCompleted", () =>
      console.log("Logged in!")
    );
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <mgt-login ref={loginComponent} />
      </header>
    </div>
  );
}

export default App;