how to delete the currentUser from gapi.auth2.getInstance() / Or a way to reset/delete the gapi instance

Question

I currently have this simple login with Google using - react-google-login with default scope.

At the Home Component there is another google Signin with youtube/readonly scope

That should bring in selected accounts youtube playlists

But it does not do that as the second Glogin button takes the first Glogin instance as precedence

I need to either delete first Google Signin Instance or delete the gapi.auth2.getAuthInstance() - Obj currentUser

Signin Component

<GoogleLogin
  clientId={process.env.REACT_APP_API_G_KEY}
  render={(renderProps) => (
    <Button
      className={classes.googleButton}
      color="primary"
      fullWidth
      onClick={renderProps.onClick}
      disabled={renderProps.disabled}
      startIcon={<Icon />}
      variant="contained"
    >
      Google Sign In
    </Button>
  )}
  accessType="offline"
  onSuccess={googleSuccess}
  onFailure={googleFailure}
  cookiePolicy="single_host_origin"
/>

After that user gets redirected to Home Component Where I need to clear out the initial Gapi instance

Gapi instance in Home component gapi.auth2.getAuthInstance() returns-

ex {Jm: ix, V_: {…}, kD: ƒ, We: ƒ, Ij: ƒ, …}
Dr: ƒ ()
FL: ƒ ()
Ij: ƒ ()
Jj: ƒ ()
Jm: ix {Ia: {…}, lV: 'single_host_origin', TY: true, Jw: true, Nr: undefined, …}
PE: ƒ ()
V_: {kD: ƒ, We: ƒ, Ij: ƒ, Dr: ƒ, Jj: ƒ, …}
We: ƒ ()
attachClickHandler: ƒ ()
currentUser: xw {Mb: Hw, h4: ww, Tb: uw}
disconnect: ƒ ()
getInitialScopes: ƒ ()
grantOfflineAccess: ƒ ()
isSignedIn: xw {Mb: false, h4: ww, Tb: uw}
kD: ƒ ()
nJ: ƒ ()
signIn: ƒ ()
signOut: ƒ ()
[[Prototype]]: Object

How do I handle this? Thanks!

Edit: The isSignedIn Value in the gapi instance is - false

isSignedIn: xw
Mb: false
Tb: uw {Tb: Array(0)}
h4: ww {value: false, V: ƒ}
[[Prototype]]: Object

I do signout the user but the first instance will still take precedence and that is not what i want.