Closing Lex chatbot window leaves shadow outline

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.