Outlook Web add-in "Office.context.ui.messageParent" works only once

Question

I have an outlook web add-in with several functions. One such function uses the API "Office.context.ui.displayDialogAsync". The code just calls a razor component "InfoDialogBox" which has two string properties "Caption" and "Message". The code for the API "Office.context.ui.displayDialogAsync" is as follows:

function DisplayMessageToUser(data) {
    return new Promise((resolve, reject) => {
        Office.context.ui.displayDialogAsync(
            outlookServerBaseAdressBlazor + 'Mail/InfoDialogBox',
            { height: 20, width: 30, requireHTTPS: true, displayInIframe: true },
            function (asyncResult) {
                const dialog = asyncResult.value;
                if (dialog) {
                    // Add event handler for when the dialog is loaded
                    dialog.addEventHandler(Office.EventType.DialogMessageReceived, function (arg) {
                        const message = JSON.parse(arg.message);
                        if (message.type === 'ok') {
                            // Close the dialog
                            dialog.close();
                            resolve(true);
                        } else if (message.type === 'dialogLoaded') {
                            // Handle the dialogLoaded message (dialog is loaded)
                            dialog.messageChild(JSON.stringify({ type: 'setData', data: data }));
                        }
                    });
                }
                else {
                    console.error('Failed to display dialog:', asyncResult.error);
                    reject(new Error('Failed to display dialog.'));
                }
            });
    });
}

And the code for "InfoDialogBox.razor.js" is as follows:

Office.onReady(async function (info) {
    if (info.host === Office.HostType.Outlook) {
        // Initialization code specific to Outlook Web Add-in dialogs

        // Message parent when the dialog is loaded
        Office.context.ui.messageParent(JSON.stringify({ type: 'dialogLoaded' }));

        // Add event handler for when the parent sends data to the dialog
        Office.context.ui.addHandlerAsync(Office.EventType.DialogParentMessageReceived,
            async function (args) {
                //const message = args.message;
                const message = JSON.parse(args.message);
                if (message.type === 'setData') {

                    // Now 'receivedData' is a JSON object that you can use
                    const receivedData = JSON.parse(message.data);

                    caption = receivedData.caption;
                    messageToDisplay = receivedData.message || '';
                    console.log(`finished recieving Data`);
                    await dotNetHelper.invokeMethodAsync('GetMessageData');
                }
            });

    }
});

The problem is when I start the outlook and select an email, and call this function "DisplayMessageToUser", everything works fine. The Office API loads the InfoDialogBox razor component using "Office.context.ui.displayDialogAsync". Once the razor component is loaded, Office.onReady is run and line "Office.context.ui.messageParent(JSON.stringify({ type: 'dialogLoaded' }));" sends a message to the parent that the dialog has been loaded. Once the parent dialog recieves the message, the event handler "DialogMessageReceived" in the outlook function sends a message to the child (caption and messgae string values as json).

messageParent success

So far so good. But when I select another email and call the same "DisplayMessageToUser" function, the razor component InfoDialogBox is loaded and Office.onReady is run but the line "Office.context.ui.messageParent(JSON.stringify({ type: 'dialogLoaded' }));" is not run. In short, the child dialog does not send any message back to the parent and the parent dialog does not recieve any message from the child.

messageParent fail

I tried to debug for exact errors and workflow. There are no errors. What I noticed in debug is that, only the first email that I select and call the "DisplayMessageToUser" function on sends a message to parent dialog box using "messageParent". When I select any other email and call the "DisplayMessageToUser" function, "messageParent" does not work although the razor component is loaded without any errors. Its just that I cannot transfer any data between the parent and child dialog boxes. But when I select the first email again and call the "DisplayMessageToUser" function, "messageParent" starts working.

In short my problem is that, "messageParent" only works one time (first email that it is called upon). It does not work for any other emails after that.