Carousel: Broken UI due to Cloned Child Elements with Infinite Scroll

[charmi-v]

Current Behavior

When the carousel element is rendered with a single child element, multiple clones of that element are rendered.

Expected Behavior

The carousel element should render with only the single child element and not display navigation arrows.

Steps To Reproduce

• Open src/components/basic/Carousel/Carousel.stories.tsx.
• Modify the itemsArray to contain only one element:
  const itemsArray = [ 'Element 1' ]
• Run storybook
• Navigate to http://localhost:3006/?path=/story/carousel--carousel.

[charmi-v]

The side effects of the cloned issue in carousel can be observed in the linked issue. Once the rendering is updated to prevent cloning, the respective ticket will be resolved directly.

Additionally, the library used for the carousel component, react-slick, has not yet resolved this issue, though workarounds are available.