I am integrating Botpress Chatbot in Nextjs 13 application But it is not working. The one with the chat button at bottom right corner is working, but when implementing in Full Page mode it is not showing anything. There is no error as well, it's just not working. Here is the code.

"use client";

import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.botpress.cloud/webchat/v0/inject.js";
    script.async = true;

    script.onload = () => {
      window.botpressWebChat.init({
        composerPlaceholder: "Chat with bot",
        botConversationDescription:
          "This chatbot was built surprisingly fast with Botpress",
        botId: "82aa6d93-338a-4b01-bb9f-f68c6eae3ea3",
        hostUrl: "https://cdn.botpress.cloud/webchat/v0",
        messagingUrl: "https://messaging.botpress.cloud",
        clientId: "82aa6d93-338a-4b01-bb9f-f68c6eae3ea3",

        // Set the name of the bot that will be displayed in the WebChat interface
        botName: "Test",

        // Set the width of the WebChat container and layout to 100% (Full Screen)
        containerWidth: "100%",
        layoutWidth: "100%",

        // Hide the widget and disable animations
        hideWidget: true,
        disableAnimations: true,
      });

      window.botpressWebChat.sendEvent({ type: "show" });
    };

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <>Botpress ChatBot</>;
}

Can anyone guide me through this please?