[Material Tailwind] Components not loading when using client:load directive

[half moss]

Hi! I recently added material tailwind components to my project but it behaves weirdly.
I followed the astro and material tailwind guides and had to make some tweaks to make it work.
First, the way of defining the components:

import R from '@material-tailwind/react';

const WorkCarousel = () => {
  return (
    <R.Carousel>
      <img
        src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
        alt="image 1"
        className="h-full w-full object-cover"
      />
      <img
        src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        alt="image 2"
        className="h-full w-full object-cover"
      />
      </R.Carousel>
  )
}

export default WorkCarousel

Here I have a StackBlitz (not mine, found it online and it's relevant to my usecase) https://stackblitz.com/edit/github-iqcrqq-jacteq?file=package.json

No error logs or trace being shown

Environment Info
$ npx astro info
Astro v4.3.2
Node v20.10.0
System Windows (x64)
Package Manager npm
Output static
Adapter none
Integrations <@&1055234544183287879>/react
<@&1055234544183287879>/tailwind

While I don't need the component to be defined in the same way, importing R every time is not good for sizing.
Additionally, if I import it without using the directive, the component doesn't work, but if added, it doesn't render.
Does someone know what's happening?

In the stackblitz it shows that the accordion doesn't react to clicking

[frigid finch]

You should be able to import Carousel like https://www.material-tailwind.com/docs/react/guide/astro#components-usage

import { Carousel } from "@material-tailwind/react"

That works in that demo