如何在react中使用MS图形api？

import React, { useEffect } from 'react';
import { initializeIcons } from '@uifabric/icons';
import { AuthenticationProvider, MsalProvider, Providers } from '@microsoft/mgt-react';
import { Login, Profile } from '@microsoft/mgt-react/dist/es6';
import { MgtTemplateProps } from '@microsoft/mgt-react/dist/es6/components/providers/mgtTemplateProps';

// 初始化MS图形API
initializeIcons();

const GraphComponent: React.FC = () => {
  useEffect(() => {
    // 在组件加载时初始化MS图形API
    Providers.globalProvider = new MsalProvider({
      clientId: '<your_client_id>',
      scopes: ['user.read', 'mail.read']
    });
  }, []);

  // 在组件中调用MS图形API
  const handleGetUser = async () => {
    const user = await Providers.globalProvider.graph.get('/me');
    console.log(user);
  };

  return (
    <div>
      <h1>React MS图形API示例</h1>
      <AuthenticationProvider>
        <Login />
        <Profile templateProps={templateProps} />
      </AuthenticationProvider>
      <button onClick={handleGetUser}>获取用户信息</button>
    </div>
  );
};

export default GraphComponent;