Herkese iyi günler.

`<section id="home-hero-section-slider"></section>` bana API'den bu şekide içi boş html gelmekte. Bunun içerisine benim hazırladığım içeriği render etmem lazım. Bu Swiper.js ile hazırlanmış birşeyde olabilir normal html de. Örnek diye aşağıya render etmek isteğim birşeyi ekledim. Bunu gayet güzel render edebiliyorum fakat https://hizliresim.com/ku94ayo bu hatayı almaktayım. Slider güzel çalışıyor fakat hatayı bir türlü çözemedim. Burada ne yapmamız lazım acaba?

// Örnek content

const swiperContent = (
    <Swiper {...homeSliderOptions} className="w-full h-[100vh]">
      {sliders.map((slide: any, index: number) => (
        <SwiperSlide
          key={index}
          className="w-full h-full bg-center bg-cover bg-no-repeat relative"
          style={{
            backgroundImage: `url(${slide.image})`,
            width: "100%",
            height: "100%",
          }}
        >
          <div className="absolute inset-0 pointer-events-none select-none">
            <div className="absolute inset-0 bg-gradient-to-r from-black/50 via-black/20 to-transparent"></div>
          </div>

          <div className="w-full h-full justify-center max-w-7xl mx-auto px-32 md:px-4 flex flex-col gap-y-4 relative">
            <h2 className="text-white text-4xl md:text-5xl max-w-full md:max-w-[450px] font-semibold leading-tight">
              {slide.title}
            </h2>

            {slide.description && (
              <p className="text-white text-sm md:text-base max-w-full md:max-w-[450px] hidden md:block">
                {slide.description}
              </p>
            )}

            <div>
              <Link
                href={language + "/" + slide.buttonUrl}
                className="bg-white font-semibold text-xs md:text-sm p-2 px-4 gap-x-4 rounded-md active:scale-[0.98] text-black inline-flex items-center justify-between hover:bg-gray-200 transition-all"
              >
                {slide.buttonTitle}
                <ChevronRightIcon className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </SwiperSlide>
      ))}

      <Link
        href="#homepage_content"
        className="absolute bottom-20 left-1/2 -translate-x-1/2 z-[1] p-2 cursor-pointer transform -rotate-90 hover:bottom-16 transition-all"
        onClick={handleClick}
      >
        <svg
          viewBox="0 0 72 18"
          xmlns="http://www.w3.org/2000/svg"
          className="w-16 h-5"
        >
          <path
            fill="#fff"
            d="M9.292 17.307l1.4-1.499-6.198-5.699h66.977V8.11H4.494l6.198-5.698-1.4-1.5L.495 9.11l8.797 8.197z"
          ></path>
        </svg>
      </Link>

      <div className="!w-8 !h-8 md:!w-9 md:!h-9 swiper-button-prev after:hidden flex items-center justify-center bg-white rounded-full !left-3 md:!left-8 hover:bg-gray-200 transition-colors active:scale-[0.98]">
        <ArrowLeftIcon className="text-black !w-4 !h-4 md:!w-5 md:!h-5" />
      </div>
      <div className="!w-8 !h-8 md:!w-9 md:!h-9 swiper-button-next after:hidden flex items-center justify-center bg-white rounded-full !right-3 md:!right-8 hover:bg-gray-200 transition-colors active:scale-[0.98]">
        <ArrowRightIcon className="text-black !w-4 !h-4 md:!w-5 md:!h-5" />
      </div>
    </Swiper>
  );

// useDynamicContent hooku

import { useEffect, ReactNode } from "react";
import ReactDOM from "react-dom/client";

interface DynamicContentElement {
  selector: string;
  content: ReactNode;
}

const useDynamicContent = (elements: DynamicContentElement[]) => {
  useEffect(() => {
    const roots = new Map<HTMLElement, ReactDOM.Root>();

    elements.forEach(({ selector, content }) => {
      const targetElement = document.querySelector(
        selector,
      ) as HTMLElement | null;
      if (targetElement) {
        let root = roots.get(targetElement);
        if (!root) {
          root = ReactDOM.createRoot(targetElement);
          roots.set(targetElement, root);
        }
        root.render(content);
      }
    });

    return () => {
      roots.forEach((root, targetElement) => {
        if (document.body.contains(targetElement)) {
          root.unmount();
        }
      });
      roots.clear();
    };
  }, [elements]);
};

export default useDynamicContent;