Custom issue collector not launching

[Mike Bauer]

I cannot get the Issue Collector dialog to open.

Here is my React button component following other examples that I can find.

The issue is that sometimes, it will launch, but most of the time it won't.  What is the best practice for opening the Issue collector from a custom button in React?

I have 3 of these buttons, that I offer my customers to add different stories, Bugs, Feedback, and change requests.

What am I missing to get these buttons to open the dialog consistently?

Thanks in advance.

import React from "react";

import $ from "jquery";

import { Row, Col, Button } from "react-bootstrap";

const FEEDBACK_ID = "feedback-button";

window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {

  // ==== custom trigger function ====

  triggerFunction: function (showCollectorDialog) {

    $(`#${FEEDBACK_ID}`).on("click", function (e) {

      e.preventDefault();

      showCollectorDialog();

    });

  },

});

const JiraFeedback = () => {

  const feedback = () => {

    const appElement = document.querySelector("body");

    if (appElement) {

      console.log("loading Feedback collector");

      const snippet = document.createElement("script");

      snippet.type = "text/javascript";

      snippet.src =

        "https://jira.reslog.psdo.leidos.com/plugins/servlet/issueCollectorBootstrap.js?collectorId=02d0fb0d&locale=en_US";

      appElement.appendChild(snippet);

    }

  };

  return (

    <Button id={FEEDBACK_ID} onClick={feedback}>

      General Feedback

    </Button>

  );

};

export default JiraFeedback;