Issue with button action on unfurling link adaptive card

Question

I have developed a Message Extension Teams app that includes a feature for link unfurling. Upon pasting the link, an adaptive card containing a button shows up in the chat. Generally, I want to popup a dialog that opens upon clicking the button and accepts text from users. But, on clicking the button, I'm getting the error "Return to the main window to perform this action." How can I fix this issue?

public async handleTeamsAppBasedLinkQuery(
    context: TurnContext,
    query: AppBasedLinkQuery
  ): Promise<MessagingExtensionResponse> {
    const previewCard = CardFactory.thumbnailCard("Preview Card", query.url);
    const card = await this.adaptiveCard(context);
    const attachment = { ...card, preview: previewCard };

    return {
      composeExtension: {
        type: "result",
        attachmentLayout: "list",
        attachments: [attachment],
        suggestedActions: {
          actions: [
            {
              title: "default",
              type: "setCachePolicy",
              value: '{"type":"no-cache"}'
            }
          ]
        }
      }
    };
  }

Adaptive Card for unfurling card:

function adaptiveCard(){
return { 
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", 
    "type": "AdaptiveCard", 
    "version": "1.6", 
    "body": [ 
        { 
            "type": "TextBlock", 
            "text": "text", 
            "wrap": true 
        } 
    ], 
    "actions": [ 
        { 
            "type": "Action.Submit", 
            "title": "Login", 
            "data": { 
                "msteams": { 
                    "type": "task/fetch" 
                }, 
                "data": "onLogin" 
            } 
        }
    ]
}
}