hey there please help me out, I am struggling from past 3 days to sort this issue.
I have created /test page in next js and created a function called RenderButton.

const RenderButton = React.useCallback(() => {
    console.log('button gets called')
    const win = window as any;
    console.log(win)
    if (win.snapuk) {
      const clientId = "cfB9gZpXGM0HkhwVMtfyaD0m";
      win.snapuk.init(clientId);
      console.log('Clent Inititated')
      win.snapuk.checkout.button({
        transaction: transaction,
        merchantId: clientId,
      });
    }
  }, []);

and executing this RenderButton function with onClick button.

<div>
      <Script
          src="https://sandbox-sdk.snapfinance.co.uk/v1/snapuk.min.js"
        />
      <h1>Hello</h1>
     
      <div id="snap-uk-checkout"></div>
      <button onClick={()=>RenderButton()}>Pay Now</button>
    </div>

the div with snap-uk-checkout with hold the payment button as per docs. but I am unable to see anything.
here is the doc link- https://qa3-developer.snapfinance.co.uk/sdks/javascript/
when I just copy paste their doc example in simple html file than it works perfectly, but dont know what happen in next js.

The sandbox link with normal html which is working fine. you guys can have a look. https://codesandbox.io/s/prod-firefly-qkykqf?file=/index.html

please help out guys 🙏