Cannot sign out after setting up TOTP MFA in cognito using amplify

Question

I have a vue app in which I am using AWS Cognito and amplify.

I am using cognito hosted UI to handle signin and signup of users and I have just enabled optional MFA in cognito management console.

I have created a component which is responsible for setting up multi factor authentication using TOTP.

Everything works fine and TOTP is set up perfectly but when I try to signout using Auth.signOut() the line does not get executed.

The signout works after a refresh tho.

Here is my code:

// The function that gets called on when user clicks send with the totp code from the app
async onClickSend() {
    if (this.authCode) {
      try {
        await this.verifyTOTPToken(this.authCode)
        this.preferedMFA = await this.getPreferredMFA()
        this.$emit("complete")
      } catch {
        this.$emit("failed")
      } 
    }
  }


async verifyTOTPToken(token: string) {
    try {
      const currentUser = await Auth.currentAuthenticatedUser()
      await Auth.verifyTotpToken(currentUser, token)
      await Auth.setPreferredMFA(currentUser, "TOTP")
      
      return Promise.resolve('Success')
    } catch (e) {
      return Promise.reject(e)
    }
  }

  async getPreferredMFA() {
    try {
      const currentUser = await Auth.currentAuthenticatedUser()
      return await Auth.getPreferredMFA(currentUser)
    } catch {
      return undefined
    }
  }

// the signout function that gets called when user tries to signout
async logout() {
    await Auth.signOut() (After setting up MFA this line does not execute) (Only works after a page refresh)
    return Promise.resolve('Success;)
  }

I have read all the documentation but am unable to find a solution to this.

MY amplify version is "@aws-amplify/auth": "^4.6.7"