Carousel with Indicators weird behavior

[alanPaivaAsp]

When clicking multiple times in the carousel using indicators variant (don't know about the others) it behaves wierd (see video example below)

Expected behavior: If I click 4 times in a fast way, it moves forward 4 images

Current behavior: Gets stuck in the current image weird-behavior.webm

Component code:

defmodule NinaWeb.PageComponents.Index.ShowCaseCard do
  @moduledoc """
  The showcase card component. Used to display a clothing item.
  """
  use Moon.StatefulComponent

  alias NinaWeb.Components.Card
  alias Moon.Icons.ControlsChevronRight
  alias Moon.Icons.ControlsChevronLeft
  alias Moon.Design.Carousel

  @doc "The Title of showcase_card"
  prop(title, :string, required: true)

  @doc "The description of showcase_card"
  prop(description, :string, required: true)

  @doc "The price of showcase_card"
  prop(price, :number, required: true)

  @doc "The image_src of showcase_card"
  prop(images, :list, required: true)

  def render(assigns) do
    ~F"""
    <Card class="" rounded={true}>
      <:header>
        <Carousel class="w-full" {=@id}>
          <Carousel.LeftArrow>
            <ControlsChevronLeft />
          </Carousel.LeftArrow>
          <Carousel.Reel>
            {#for image <- @images}
              <Carousel.Item class="w-full h-[400px] rounded-none rounded-t-2xl">
                <img src={image.url} alt={"showcase-card-image-#{@id}"} class="w-full h-full object-fill rounded-t-2xl">
              </Carousel.Item>
            {/for}
            <Carousel.Indicator />
          </Carousel.Reel>
          <Carousel.RightArrow>
            <ControlsChevronRight />
          </Carousel.RightArrow>
        </Carousel>
      </:header>

      <div>
        <h1>{@title}</h1>
        <p>{@description}</p>
        <span>{@price}</span>
      </div>
    </Card>
    """
  end
end

Am I missing something?