I am revamping a website for a restaurant and am using NextJS app router. They use a 3rd part reservation system. I am loading a 3rd party script using <Script src=""/>, which works. Running the script should attach an eventListener to a button which appends an iframe on click.

Is there I am overseeing? i.e. anything in next.config.js?

The old website is here: https://treeswijkhoeve.nl/ (click Reserveren)

My button component:

'use client';

import { useLocale } from 'next-intl';
import Container from './Container';
import Grid from './Grid';
import Script from 'next/script';
import { useEffect } from 'react';

export default function Reservation() {
  const locale = useLocale();

  return (
    <div className="sticky w-full bottom-0 left-0 z-30">
      <Container>
        <Grid>
          <div className="col-start-8 col-span-5 lg:col-start-11 lg:col-span-2">
            <div className="pb-6 w-full flex justify-end">
              <button
                id="cta-button"
                className="max-w-56 w-full pt-[0.55em] pb-[0.45em] rounded-lg text-black bg-trswk-white border-trswk-gray hover:text-trswk-white hover:bg-black border text-button"
              >
                {locale === 'en' ? 'Reservation' : 'Reserveren'}
              </button>
            </div>
          </div>
        </Grid>
      </Container>

      <Script
        src="https://app.wereserve.nl/widget/book/latest"
        onLoad={() => {
          const config = {
            url: 'https://app.wereserve.nl/widget/book/1',
            urlMobile: 'https://app.wereserve.nl/m/reservate/1',
            ctaSelector: 'cta-button',
          };
          // @ts-ignore
          console.log('wereserve', wereserve); // works
          // @ts-ignore
          wereserve.setupBookWidget(config); // clicking 'cta-button' as no effect
        }}
      />
    </div>
  );
}