Response card is not displaying while using AmplifyChatbot component in React js but in amazon lex its displaying fine

Question

Trying to implement Amazon lex bot in my website(reactjs) using AmplifyChatbot

AmplifyChatbot Docs:https://ui.docs.amplify.aws/react/legacy-components/chatbot

Response card is displaying fine on amazon lex but in website its not displaying

this is my react js code

import * as React from "react";
import { Amplify } from "aws-amplify";
import { AmplifyChatbot } from "@aws-amplify/ui-react/legacy";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

Amplify.configure({
  Interactions: {
    bots: {
      MySurvey: {
        name: "MySurvey",
        alias: "mySurvey",
        region: "us-east-1",
      },
      OrderFlowers_dev: {
        name: "OrderFlowers_dev",
        alias: "$LATEST",
        region: "us-east-1",
      }
    },
  },
});

function App() {
  React.useEffect(() => {
    console.log(Amplify);
  });

  return (
    <div>
      <AmplifyChatbot
        botName="MySurvey"
        botTitle="myBot"
        welcomeMessage="Hello, how can I help you?"
      />
      </div>
  );
}

export default App;

this is my package.json

{
  "name": "amazon-lex-integration",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/cli": "^10.2.3",
    "@aws-amplify/ui-react": "^3.5.7",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^4.3.37",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

and below is the part of my lambda func if you need it

  function getButtons(options){
      console.log('im in getButtons')
      // console.log('button',typeof options[0].domain);
      var buttons = [];
      
      for(let i = 0; buttons.length < 2; i++){
        //   console.log('in for loop',await checkAvail(options[i].domain).then(res => res.data.available));
            if(true){
                buttons.push({
                    text: options[i].domain,
                    value: options[i].domain
                })
            }
        console.log('end line foor button', buttons);
        
      
      }
      console.log('buttons in outer foreach loop ',buttons);
      return buttons;
    }

    function getOptions(title, types) {
      return {
        title: title,
        subTitle: 'subttile',
        imageUrl: 'https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/featured-what-is-domain.png',
        buttons: getButtons(types)
      };
    }
    
    
    
    
    // if(intentRequest.invocationSource === 'DialogCodeHook'){
        console.log('im in dialog');
        
        if(!avail){
          
            var options = getOptions('Check out these alternate names', opt)
            slots['DomainName'] = null;
            if(options){
                callback(
                elicitSlot(
                    intentRequest.sessionAttributes,
                    intentRequest.currentIntent.name,
                    slots,
                    'DomainName',
                    {'contentType': 'PlainText', 'content': `${domainN} is already taken, Try a different name `},
                    options.title,
                    options.subTitle,
                    options.imageUrl,
                    options.buttons
                )
            );
            }
        }