Javascript – Unable to add more than 2 adsterra ad banner on Next.js 14 app

I’m getting issue on adding more than 2 adsterra ad banner on Next.js 14 app. When I’m trying to render two Adsterra ad banner’s on a same page,the first one is’nt rendering.
I also tried with next/script, getting same issue

First banner code:

"use client";

import classNames from "classnames";
import { HTMLAttributes, useEffect, useRef } from "react";

const BannerAd468x60 = (props: HTMLAttributes<HTMLDivElement>) => {
  const { className } = props;
  const container = useRef<HTMLDivElement>(null);

  const isWindow = typeof window !== "undefined";

  const atOptions = {
    key: "abc",
    format: "iframe",
    height: 60,
    width: 468,
    params: {},
  };

  useEffect(() => {
    if (isWindow && container.current && !container.current.firstChild) {
      const conf = document.createElement("script");
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `//www.topcreativeformat.com/${atOptions.key}/invoke.js`;
      script.async = true;
      script.defer = true;
      conf.async = true;
      conf.defer = true;
      conf.innerHTML = `atOptions = ${JSON.stringify(atOptions)}`;

      container.current.append(conf);
      container.current.append(script);
    }
  }, [container, isWindow]);

  return (
    <div
      ref={container}
      className={classNames(
        "flex items-center justify-center",
        className && className
      )}
    />
  );
};

export default BannerAd468x60;

Second Banner code:

"use client";

import classNames from "classnames";
import { HTMLAttributes, useEffect, useRef } from "react";

const BannerAd728x90 = (props: HTMLAttributes<HTMLDivElement>) => {
  const { className } = props;
  const container = useRef<HTMLDivElement>(null);

  const isWindow = typeof window !== "undefined";

  const atOptions = {
    key: "abc",
    format: "iframe",
    height: 90,
    width: 728,
    params: {},
  };

  useEffect(() => {
    if (isWindow && container.current && !container.current.firstChild) {
      const conf = document.createElement("script");
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `//www.topcreativeformat.com/${atOptions.key}/invoke.js`;
      script.async = true;
      script.defer = true;
      conf.async = true;
      conf.defer = true;
      conf.innerHTML = `atOptions = ${JSON.stringify(atOptions)}`;

      container.current.append(conf);
      container.current.append(script);
    }
  }, [container, isWindow]);

  return (
    <div
      ref={container}
      className={classNames(
        "flex items-center justify-center",
        className && className
      )}
    />
  );
};

export default BannerAd728x90;

Unable to add more than 2 adsterra ad banner on Next.js 14 app