verifon iframe (react)

j5.tsx

import { useContext, useEffect, useRef } from "react";
import { DispatchOrderContext } from "./wrapper";

export const ShowJ5Form = () => {
    const { state: { charge: { j5: { url } } } } = useContext(DispatchOrderContext);
    const paymentDiv = useRef<HTMLDivElement>()

    useEffect(()=>{
        if(!url) {
            if(paymentDiv && paymentDiv.current){
                paymentDiv.current.innerHTML = '';
            }
            return;
        }
        const script = document.createElement('script');
        script.src = url + "&containerId=payment_form_container&nocahe=" + (+new Date());
        script.defer = true;
        
        document.body.appendChild(script);
        console.log(script)
        console.log(script.src)
        return () => {
            // document.body.removeChild(script);
        }
    }, [url])
    
    return (
        <div id="payment_form_container" ref={paymentDiv} style={{height: '150px', background: 'white'}}>
            <script defer src={url}></script>
        </div> 
    )
}

tried both ways, script tag inside div, or append to body the script, but it doesn't do anything

Using docs https://verifone.cloud/docs/online-payments/checkout/accepting-payments (need to click iframe to see instruction)