React js - Bot renders multiple times in DOM
# 🤝help
e
Hi guys, long time member of the server, finally decided to bite the bullet and create my own bot. I'm currently having an issue where I can see in the DOM that the bot renders multiple times, leading also to GUI issues (visible in screenshot - minimization doesn't look as it should). I'm cleaning up the useEffect by unmounting the script but it seems that it doesn't help and I can't seem to find any similar issues anywhere. Below the Chatbot code, any help is much appreciated!
Copy code
import React, { useEffect } from "react";

export const Chatbot = () => {

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

    script.onload = () => {
      window.botpressWebChat.init({
        composerPlaceholder: "Need a hand?",
        botConversationDescription: "Book manager lends a hand",
        botId: "c66de7a3-.........-734c6b823463",
        botName: "Martha",
        hostUrl: "https://cdn.botpress.cloud/webchat/v1",
        messagingUrl: "https://messaging.botpress.cloud",
        clientId: "c66de7a3-.........-734c6b823463",
        webhookId: "340cb504-........-274567397fbe",
        stylesheet:
          "https://webchat-styler-css.botpress.app/prod/04a985e1-.......c99734/v97189/style.css",
      });
    };
    document.body.appendChild(script);

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

  return <div id="webchat" />;
};
https://cdn.discordapp.com/attachments/1223589676732911628/1223589677508853770/image.png?ex=661a67b0&is=6607f2b0&hm=fafa1b2b2229d8ad0b49462a095a4039c7dbe2a8f79fb78f0a55131b9272663b&