MSAL SSO with Microsoft Teams Tabs

Hi So I'm using MSAL to authenticate my users, It's working in my browser but I want to embed my web in Microsoft teams tabs and use the SSO. If I see on the MSAL documentation https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-sso I can use AcquireTokenSilent and using sid to authenticate. but I don't know why I get this error Unhandled Rejection (ClientAuthError): Token renewal operation failed due to timeout after calling the AcquireTokenSilent.

async componentDidMount() {
    var needAuth = true;
    microsoftTeams.initialize();
    await microsoftTeams.getContext(async function (context) {
      alert(JSON.stringify(context));
      needAuth = false;
      const provider = {
        scopes: ["https://graph.microsoft.com/.default", "user.read"],
        sid: context.sessionId,
        extraQueryParameters: { domain_hint: 'organizations' }
      };
      await authProvider.acquireTokenSilent(provider);
      alert(authProvider.authenticationState);
      this.setState({ needLogin: needAuth });
    })
  }

Is there anything wrong with my code? Am I missing something after AcquireTokenSilent?