I'm using CDN links of intro.js, I want to implement "don't show again checkbox on Intro.js pop-up", how can we do that?

Question

We have a requirement where I have to add a checkbox on the intro.js pop-up,
so I have used intro.js min and CSS files CDN links to use the Intro.js,
currently, I'm getting intro.js pop-up with the intro and checkbox,

Issues I am facing are:

1. If I am using checkboxes on multiple steps then I am not able to fetch the checkbox value, its works in the case of one step
   
2. Is there any other way to add a checkbox in intro.js
   
3. when I click the checkbox and click on the done button the value of the checkbox should be passed to the backend
   

I Have tried something like.

Reactjs code

    const HomePage: React.FunctionComponent<Props> = ({ id }: Props) => {
    const [checkTour, setCheckTour] = React.useState(false);
    
            React.useEffect(() => {
                if ((window as any).introJs) {
                    (window as any)
                        .introJs()
                        .setOptions({
                            disableInteraction: true,
                            exitOnEsc: false,
                            exitOnOverlyClicking: false,
                            overlayOpacity: 0.7,
                            showBullets: false,
                            showProgress: false,
                            showStepNumbers: false,
                            tooltipClass: "customTooltip",
                            steps: [
                                {
                                    title: "Welcome",
                                    intro: `Hello World!  `,
                                    element: document.querySelector("#logoHeighlight"),
                                    tooltipClass: "welcomeTooltip",
                                },
                                {
                                    intro: "<style>{color: 'red';};</style>step 1"!  `,
                                    element: document.querySelector("#cart"),
                                },
                                {
                                    intro: `Go to plp page <label for='donotShowMeAgain'> Do Not Show Me Again </label><input type='checkbox' id='donotShowMeAgain'>`,
                                    element: document.querySelector("#HeaderSignIn"),
                                },
                            ],
                        })
                        .onbeforeexit(function () {
                            // eslint-disable-next-line no-console
                            console.log("before Done Calling");
                        })
                        .start();
                    const doneTour = document.getElementById("donotShowMeAgain");
        
                    doneTour?.addEventListener("click", donotShowMeAgainClicked);
        
                    return () => {
                        doneTour?.removeEventListener("click", donotShowMeAgainClicked);
                    };
                }
            }, []);
        
            const donotShowMeAgainClicked = (e: any) => {
                setCheckTour(e.target.checked);
            };
            // eslint-disable-next-line no-console
            console.log("checkTour", checkTour);
         return (
                <Page data-test-selector="homePage" {...styles.homePageContainer} className="homePageContainer">
                    <Zone contentId={id} zoneName="Content" requireRows />
                    <AddToListModal />
                </Page>
            );
        };

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>