Is there a better way to setup google API script without getting an error?

Question

I am trying to set up Google API on a project I am working on and it seems to be throwing an error upon running the app. Below are steps to reproduce the error:

1. Copied and pasted script tag provided by Google.

    <script async defer src="https://apis.google.com/js/api.js"
     onload="this.onload=function(){};loadClient()"
     onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>
   
   

2. Pasted the script in my _app.js file as shown below

     import "./styles.css";
     import Script from "next/script";
     import { SessionProvider } from "next-auth/react";
     import Layout from "../components/layout";

export default function App({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session} refetchInterval={5 * 60}>
      <Layout>
        <Component {...pageProps} />
        <Script
          async
          defer
          src="https://apis.google.com/js/api.js"
          onload="this.onload=function(){};loadClient()"
          onreadystatechange="if (this.readyState === 'complete') this.onload()"
        />
      </Layout>
    </SessionProvider>
  );
}

3. Ran the code and got ReferenceError: loadClient is not defined

I didn't think I would have to "define" loadClient as it is part of the provided Google script. All pointers to resolving this issue are very much appreciated.