BotFramework-WebChat Error: <ActivityKeyerComposer> should not be nested

Question

I am trying to build a customised chatbot using BotFramework-WebChat. I am trying to build the chat window using the existing components available. But I am getting this error: should not be nested.

I am using

The code is :

<ReactWebChat
      className={`${className || ""} web-chat`}
      directLine={directLine}
      store={store}
      styleSet={styleSet}
    />
  ) : (
    <div className={`${className || ""} connect-spinner`}>
      <div className="content">
        <div className="icon">
          <span className="ms-Icon ms-Icon--Robot" />
        </div>
        <p>Please wait while we are connecting.</p>
      </div>
    </div>
  );
};

I have used it from one of the samples : https://github.com/microsoft/BotFramework-WebChat/blob/main/samples/06.recomposing-ui/a.minimizable-web-chat/src/MinimizableWebChat.js but it is not working for me

I tried removing every layer of code I have added to check where the nesting is happening but it didn't work. Basically my goal is to achieve making the bot with existing components but customised UI so I'm open to any suggestions regarding how to achieve that