I'm using an old-school payment portal in my React app which requires that their JQuery script is imported to properly render an iFrame widget.

I went into my index.js file in public folder and added the script into the head:

<script type="text/javascript" src="https://vendorUrl.com/popup.js"></script>

Among other things, the referenced script ensures that the iFrame is hidden at launch until a button is clicked:

jQuery(document).ready(function () {
    var iframe = document.getElementById("SpecificIFrame");

    ...
    iframe.style.opacity = 0;
    iframe.style.transition = 'opacity .5s ease-in-out';

    jQuery(".show-popup").on("click",
        function (e) {
            e.preventDefault();
            openPopup();
        });
});

function openPopup() {
    var iframe = document.getElementById("SpecificIFrame");
    iframe.style.opacity = 1;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    ...
}

So, when in my functional component I create the iFrame, I'm surprised to see that it's visible and ignores all the jQuery code in the external script.

import $ from "jquery";

export default function MyComponent() {
    return(
        <>
            <iframe 
                id='SpecificIFrame' 
                src='https://myUrl.com/...'>
            </iframe>
            <button className='show-popup'>Pay via Platform</button>
        </>
    )
}

Why is the script being ignored? What can I do to fix this please?