Reactjs 如何使用gapi登录并在react中获取用户信息？

在我添加的react项目中，我使用gpai登录google 这两个脚本位于my index.html中

然后我创建了login.js页面，下面是我的代码：-

import React，{useffect}来自“React”；
函数登录（）{
函数onSignIn（谷歌用户）{
var profile=googleUser.getBasicProfile（）；
console.log（“ID:+profile.getId（））；//不要发送到后端！改用ID令牌。
log（“Name:+profile.getName（））；
log（“图像URL:+profile.getImageUrl（））；
console.log（“Email:+profile.getEmail（））；//如果“Email”作用域不存在，则为null。
}
返回(
);
}
导出默认登录；

但是我不能调用这个登录函数。有人能帮我解决这个问题吗

<script
      src="https://apis.google.com/js/platform.js?onload=init"
      async
      defer
    ></script>
    <meta
      name="google-signin-client_id"
      content="client id"
    />

import React, { useEffect } from "react";
function Login() {
  function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    console.log("ID: " + profile.getId()); // Do not send to your backend! Use an ID token instead.
    console.log("Name: " + profile.getName());
    console.log("Image URL: " + profile.getImageUrl());
    console.log("Email: " + profile.getEmail()); // This is null if the 'email' scope is not present.
  }
  return (
    <div>
      <div class="g-signin2" data-onsuccess="onSignIn"></div>
    </div>
  );
}
export default Login;