I'am trying to add google one tap on my next js amp page. The implementation is based on an intermediate iframe approach based on this doc https://developers.google.com/identity/gsi/web/amp/intermediate-iframe

This is the code

Hosted intermediate Iframe page

/pages/amp-gtap-iframe.js

function AmpGtapIframe(props) {
// logic to initialize google gsi , not sure if this is needed but even with this the AMP page one tap does not work
const handleGoogleLogin = async (response) => {
    //logic to handle login
};

  const initializeGSI = () => {
    google.accounts.id.initialize({
      client_id: GOOGLE_CLIENT_ID,
      cancel_on_tap_outside: false,
      callback: handleGoogleLogin,
    });
  };

  useEffect(() => {
  
      const el = document.createElement('script');
      el.setAttribute('src', 'https://accounts.google.com/gsi/client');
      el.onload = () => initializeGSI();
      document.querySelector('body').appendChild(el);
 
  }, []);
/////////

  return (
  <div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-allowed_parent_origin="https://example.com">
</div>
  );
}

export async function getStaticProps(context) {
  return {
    props: {},
  };
}

export default AmpGtapIframe;

The next js amp page

/pages/amp-page.js

export const config = {
  amp: true,
};

function AmpPage(props) {
  return (
    <div>
      <amp-onetap-google
        layout="nodisplay"
        data-src="https://example.com/amp-gtap-iframe"
      ></amp-onetap-google>
    </div>
  );
}

export async function getStaticProps(context) {
  return {
    props: {},
  };
}

export default AmpPage;

When I go to example.com/amp-page , I get an iframe but the google logged in email ids are not being rendered

Not sure what I did wrong , or my understanding of implementation is incorrect , any help is much appreciated , thanks in advance .