Using React hook to render AdaptiveCard

I'm trying to use an Adaptive Card with React WebChat from botframework-webchat.

I found the useAdaptiveCardsPackage hook and used it like this:

const [adaptiveCards] = useAdaptiveCardsPackage()

I'm trying to render a card by calling: adaptiveCards.AdaptiveCard(myJsonCardSchema).

However, the error is displayed:

TypeError: this.getSchema is not a function at Object.SerializableObject2

Am I rendering the card correctly?

Im trying to render an adaptive card

I found the solution using pure js. I chose this path because I thought it was better to configure it my way.

Instructions are at this link: https://learn.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/getting-started

First install the package:

npm install adaptivecards

Import it into your project

import * as AdaptiveCards from "adaptivecards"

And followed the instructions below as on the official website:

// Author a card
var card = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/adaptive-card-50.png"
        },
        {
            "type": "TextBlock",
            "text": "Hello **Adaptive Cards!**"
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Learn more",
            "url": "http://adaptivecards.io"
        },
        {
            "type": "Action.OpenUrl",
            "title": "GitHub",
            "url": "http://github.com/Microsoft/AdaptiveCards"
        }
    ]
};

// Create an AdaptiveCard instance
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
      
// Parse the card payload
adaptiveCard.parse(card);

// Render the card to an HTML element:
var renderedCard = adaptiveCard.render();

// And finally insert it somewhere in your page:
document.body.appendChild(renderedCard);

Works great!