Excel add-ins | Enable/Disable ribbon icon based on condition

Question

I am using Office.js, javascript and react to create excel add-ins. Wants to enable ribbon icons once user successfully sign in. Used Office dialog API for authentication.

1. below is the tag from Manifest.xml file used to disable "HomeButton menu" icon initially.

    <Action xsi:type="ShowTaskpane">
       <TaskpaneId>DataDirectId</TaskpaneId>
       <SourceLocation resid="HomeButton.Url" />
    </Action>
    <Enabled>false</Enabled>
   

2. On Click of Login menu icon from ribbon task pan will open with sign in page which contains "Sign IN and Sign Out" buttons.

3. On click of sign in button below office dialog API code getting called.

    Office.context.ui.displayDialogAsync(
    dialogLoginUrl,
    { height: 45, width: 40 },
    result => {
        if (result.status === Office.AsyncResultStatus.Failed) {
            displayError(`${result.error.code} ${result.error.message}`);
        } else {
            loginDialog = result.value;
            loginDialog.addEventHandler(
                Office.EventType.DialogMessageReceived,
                processLoginMessage,
            );
            loginDialog.addEventHandler(
                Office.EventType.DialogEventReceived,
                processLoginDialogEvent,
            );
        }
    },
   

   );

// Handlers:

const processLoginMessage = arg => {
    const messageFromDialog = JSON.parse(arg.message);
    if (messageFromDialog.status === 'success') {
    // below method using to enable ribbon Home button icon
        enableButton();
        loginDialog.close();
        // console.log('login detail==', messageFromDialog.result);
        localStorage.setItem('loggedIn', 'yes');
    } else {
        // Something went wrong with authentication or the authorization of the web application.
        loginDialog.close();
        displayError(messageFromDialog.result);
    }
};

const processLoginDialogEvent = arg => {
    processDialogEvent(arg, setState, displayError);
};

4. Below is the enableButton method for which took reference from Enable / Disable

// Code from enableButton method

    const enableButton = () => {
    // Tried with this option 1
    OfficeRuntime.ui.getRibbon().then(ribbon => {
        ribbon.requestUpdate({
            tabs: [
                {
                    id: 'ShareTime',
                    controls: [
                        {
                            id: 'BtnNTHome',
                            enabled: true,
                        },
                    ],
                },
            ],
        });
    });
    // Tried with this option 2
    Office.ribbon.requestUpdate({
        tabs: [
            {
                id: 'ShareTime',
                controls: [
                    {
                        id: 'BtnNTHome',
                        enabled: true,
                    },
                ],
            },
        ],
    });
    // Tried with this option 3
    const button = { id: 'BtnNTHome', enabled: true };
    const parentTab = { id: 'ShareTime', controls: [button] };
    const ribbonUpdater = { tabs: [parentTab] };
    Office.ribbon.requestUpdate(ribbonUpdater);
};

Tried with Above 3 options but getting below error: excel-web-16.00.js:26 Uncaught (in promise) RichApi.Error: The API you are trying to use is not available. It may be available in a different scenario. at new n (https://appsforoffice.microsoft.com/lib/1/hosted/excel-web-16.00.js:26:300800) at r.i.processRequestExecutorResponseMessage (https://appsforoffice.microsoft.com/lib/1/hosted/excel-web-16.00.js:26:362097) at https://appsforoffice.microsoft.com/lib/1/hosted/excel-web-16.00.js:26:360202

Please help to resolve this issue . Appreciate your help. Thanks in advance.