How i can solve this error in HTML, google signin new library. Problem with signout button

Question

I have this HTML and JS code:

<script src="https://accounts.google.com/gsi/client" async defer></script>
<div class="loginButton" id="loginButton">
  <div
    id="g_id_onload"
    data-client_id="314858521059-0ss42dso5d8hn5992mjf5qkcnnhge1vq.apps.googleusercontent.com"
    data-callback="handleCredentialResponse"
    data-auto_prompt="false"
  ></div>
  <div
    class="g_id_signin"
    data-locale="en"
    data-type="standard"
    data-size="large"
    data-theme="filled_black"
    data-text="sign_in_with"
    data-shape="circle"
    data-onsuccess="handleCredentialResponse"
  ></div>
</div>

And JS code:

function signOut() {
  var auth2 = gapi.auth2.getAuthInstabce();
  auth2.signOut().then(function () {
    alert('Test sign out');
    $('.g-signin2').css('display', 'block');
    $('.data').css('display', 'none');
  });
}

And in conclusion i have this problem in my console, when i want to press log out button: Uncaught ReferenceError: gapi is not defined at signOut (about.html:225:29) at HTMLButtonElement.onclick (about.html:189:75)

Thank you in advance!

I was trying to find some resourses to solve this problem, but every time i had the same result as you can see.