[Carousel]

[michelmar]

In my React application, I'm using a Carousel component to display a series of items. Within each Carousel Item, I'm rendering a complex component called PersonaInput, which itself contains a map iteration over options to render RadioButtonGroup.Item components.

However, I've encountered an issue where each RadioButtonGroup.Item within PersonaInput is mistakenly recognized as a separate Carousel Item by the Carousel component. This behavior disrupts the intended functionality of the Carousel.

Here's a simplified version of the code structure:

<Carousel.Viewport>
  <Carousel.ItemGroup>
    {images.map((image, index) => (
      <Carousel.Item key={index} index={index}>
        <PersonaInput
          value={persona}
          onChange={setPersona}
        />
      </Carousel.Item>
    ))}
  </Carousel.ItemGroup>
  {/* Carousel controls */}
</Carousel.Viewport>

In the PersonaInput I havel another map, something like:

 {options.map((option, id) => (
          <RadioButtonGroup.Item
            key={`persona-${option.value}`}

How can I ensure that the Carousel treats each PersonaInput component as a single item, regardless of the number of RadioButtonGroup.Item components it contains? Or is this behavior possibly a bug?

(Note: I've discovered that using components other than RadioButtonGroup.Item within the map iteration works fine.)

[cschroeter]

@michelmar

Could you please provide a minimal example repo. You can use this CodeSandbox: https://stackblitz.com/github/chakra-ui/ark/tree/main/templates/react/next-js?file=README.md