Closing Lex chatbot window leaves shadow outline

Question

I am integrating AWS Lex into my React website following this guide: https://aws.amazon.com/blogs/machine-learning/deploy-a-web-ui-for-your-chatbot/

For clarity, here is my Function Component on the front-end side:

const LexChatBot: React.FC = () => {
  useEffect(() => {
    // Load the Lex Web UI[enter image description here](https://i.sstatic.net/rnYCIVkZ.png) script
    const script = document.createElement('script');
    script.src = `${process.env.REACT_APP_AMAZON_LEX_URL}/lex-web-ui-loader.min.js`;
    script.async = true;

    script.onload = () => {
      const loaderOpts = {
        baseUrl: `${process.env.REACT_APP_AMAZON_LEX_URL}/`,
        shouldLoadMinDeps: true,
      };
      const loader = new (window as any).ChatBotUiLoader.IframeLoader(loaderOpts);

      const userId = getUserId();
      const chatbotUiConfig = {
        lex: {
          sessionAttributes: {
            userId: userId,
          },
        },
      };

      loader.load(chatbotUiConfig).catch((error: any) => {
        console.error(error);
      });
    };

    document.body.appendChild(script);

    // Clean up the script when the component is unmounted
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div id="lex-web-ui" />;
};

When I close the chatbot on my website, it leaves a gray outline/shadow where the chat window was. (https://i.sstatic.net/v8fdCBio.png)

Where might this problem arise from? The UI for the chatbot itself is custom Vue app following the AWS guide here: https://github.com/aws-samples/aws-lex-web-ui#examples but I have a feeling that the chatbot UI is independent of the issue on my webpage.