title: Why does the Sign In With Google button disappear after I render it the second time?
body: <p>I am using the <a href="https://developers.google.com/identity/gsi/web/guides/overview" rel="nofollow noreferrer">Sign In With Google</a> button from Google Identity. I have put the HTML from this <a href="https://developers.google.com/identity/gsi/web/guides/display-button" rel="nofollow noreferrer">button documentation page</a> into a React component. Looks like this:</p>
  <pre><code>export default function GoogleLoginButton() {
  
    return (
      &lt;&gt;
        &lt;div
          id=&quot;g_id_onload&quot;
          data-client_id=&quot;XXXXXX&quot;
          data-auto_prompt=&quot;false&quot;
        &gt;&lt;/div&gt;
        &lt;div
          className=&quot;g_id_signin&quot;
          data-type=&quot;standard&quot;
          data-size=&quot;large&quot;
          data-theme=&quot;outline&quot;
          data-text=&quot;sign_in_with&quot;
          data-shape=&quot;rectangular&quot;
          data-logo_alignment=&quot;left&quot;
        &gt;&lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>On loading the page the first time the Google sign-in button appears correctly and I can log in. The sign-in button is then replaced by a log-out button. The problem is that when I click the log-out button which should render the Google sign-in button again, it doesn't reappear! Why is that?</p>
  <p>I can add that refreshing the page after logging out brings back the Google button.</p>