在 React 错误中实现 Google 登录 - <div> 标签上的 prop`data-callback` 的值无效

如何解决在 React 错误中实现 Google 登录 - <div> 标签上的 prop`data-callback` 的值无效

我正在尝试在 React 中实现谷歌登录。这是我的组件 -

import { Fragment,useEffect } from "react";
import { GOOGLE_CLIENT_ID } from "./some-file";

const GoogleSignIn = () => { 

  const googleSignInHandler = response => {
    console.log(response);
  }

  const initGsi = () => { 
    if(window.google) { 
        window.google.accounts.id.initialize({
            client_id: GOOGLE_CLIENT_ID,callback: googleSignInHandler
        });
    }
  }

  useEffect(() => {
   initGsi();
  },[]);

  return (
    <Fragment>
      <div
        id="g_id_onload"
        data-client_id={GOOGLE_CLIENT_ID}
        data-context="use"
        data-ux_mode="popup"
        data-auto_prompt="false"
      ></div>

      <div
        className={['g_id_signin','gsignin'].join(' ')}
        data-type="standard"
        data-shape="rectangular"
        data-theme="filled_blue"
        data-text="continue_with"
        data-callback={googleSignInHandler}
        data-size="large"
        data-logo_alignment="left"
      ></div>
    </Fragment>
  );
};

export default GoogleSignIn;
`

显然，如果我设置 data-auto_prompt="true" 即一键，它会起作用。但是，我不知道如何使它适用于单击按钮。我真的不想使用 npm 包，此外它们也基于旧版 Google 登录。有办法吗？