Embed support into React application and restrict it to only logged in users

I have a React application to which I am trying to add the Jira support widget. I already have the script tag to use. The issue I am facing is I need to have the widget appear only when the user is logged in. I have tried adding the script tag using a useEffect (please see the code below) and then restricting it using my login condition, but for some reason the widget refuses to show. I can see the script tag successfully added to the application on the element tab of my browser. Perhaps this might be an initialization issue?

useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://jsd-widget.atlassian.com/assets/embed.js";
    script.setAttribute('data-jsd-embedded', '');
    script.setAttribute('data-key', '');
    script.setAttribute('data-base-url', 'https://jsd-widget.atlassian.com');
    script.async = true;
  
    document.body.appendChild(script);
  
    return () => {
      document.body.removeChild(script);
    };
  }, []);