Nesting Server Component inside Client Component, and running a script on DOM nodes in Next.JS 13

Question

js developers, I've been searching for this specific usage in the docs and not finding exactly what I was looking for.

I'm trying to integrate the Tailwind Elements Carousel inside a SSG component using Next's Page Router.

I've read in Tailwind Elements' documentation how to set TE for Next, and that I should use Client Components for the components including some Tailwind Elements related code.

However, I can't manage to make use of a Client Component that takes an array of Server Components as a custom prop, I know from Next.js documentation that I can do so, and it ~works: it displays the components' HTML, but it doesn't let the Carousel script parse this HTML, so they don't animate at all.

The component I'd like to have would be looking something like this:

'use client'
import { useEffect, useRef } from 'react'
import { Carousel as TECarousel } from 'tw-elements'

export default function Carousel({ items, ...props }) {
  const elementRef = useRef()

  useEffect(() => {
    const carousel = new TECarousel(elementRef.current, { ride: 'carousel' })

    return () => {
      carousel.dispose()
    }
  }, [])

  return (<div
    ref={elementRef}
    data-te-carousel-init
    {...props}
  >
   <div
      className="relative w-full overflow-hidden after:clear-both after:block after:content-['']"
    >
      {items.map((item, index) => (<div
        className={`relative float-left -mr-[100%] ${index === 0 ? '' : 'hidden'} w-full transition-transform duration-[600ms] ease-in-out`}
        key={index}
        data-te-carousel-item
        data-te-carousel-active={index === 0}
        style={{ backfaceVisibility: 'hidden' }}
      >
        {item}
      </div>))}
    </div>
  </div>)
}

But if I use the children prop instead of a custom one, I can have it working as expected:

'use client'
import { useEffect, useRef } from 'react'
import { Carousel as TECarousel } from 'tw-elements'

export default function Carousel({ children, ...props }) {
  const elementRef = useRef()

  useEffect(() => {
    const carousel = new TECarousel(elementRef.current, { ride: 'carousel' })

    return () => {
      carousel.dispose()
    }
  }, [])

  return (<div
    ref={elementRef}
    data-te-carousel-init
    {...props}
  >
    <div
      className="relative w-full overflow-hidden after:clear-both after:block after:content-['']"
    >
      {children}
    </div>
  </div>)
}

In that case, I can use it in my Server Components like this:

import dynamic from 'next/dynamic'
const Carousel = dynamic(() => import('../../components/Carousel')

export default function MyProject() {
  return (<div>
    <Carousel>
      <div
        className={`relative float-left -mr-[100%] ${isActive ? '' : 'hidden'} w-full transition-transform duration-[600ms] ease-in-out`}
        data-te-carousel-item
        data-te-carousel-active={isActive}
        style={{ backfaceVisibility: 'hidden' }}
      >
        <img src="some/image.tiff" alt="My image" />
      </div>
      /* Other carousel items */
    </Carousel>
  </div>)
}

I could live with this code, but not having to reapeat the outer element with Tailwind Elements related attribute would be better in my opinion. And I'm also quite curious to understand what makes it possible with the children prop but not looping through an array...

If anyone has any explanation or solution I'll be very grateful for reading it. Many thanks!