I am trying to create a carousel that accepts children, then maps over those children to display a slider / carousel that is able to loop items fluidly if clicking next and on the last child a clone of the first child is inserted after and the carousel should go to the newly created index. THen of course after 300ms it will seemlsy go to the 0 index child and looping continues. The same for when hitting previous except the last child is cloned and placed before the first item in the carousel. I have the items cloning but clicking next or previous does not work with moving to the cloned elements.

const Slider: React.FC<BannerSliderProps> = ({ children }) => {
   const slideElements = React.Children.toArray(children);
   const [currentIndex, setCurrentIndex] = useState(0);

   const handleMoveLeft = () => {
     setCurrentIndex((prevIndex) =>
       prevIndex === 0 ? slideElements.length - 1 : prevIndex - 1
     );
   };

   const handleMoveRight = () => {
     setCurrentIndex((prevIndex) => {
       const nextIndex = prevIndex + 1;
         if (nextIndex >= slideElements.length) {
   // If at the last slide and moving right, set index to the newly appended slide
           return slideElements.length;
         } else {
            return nextIndex;
         }
      });
     };

   const renderSlides = () => {
     let slides = slideElements.map((slide, index) => (
       <div className="slide" key={index}>
         {slide}
        </div>
       ));

    // Clone first slide and append after the last slide
    if (slideElements.length > 1 && currentIndex === slideElements.length - 1) {
     slides = [
       ...slides,
        <div className="slide" key={slideElements.length}>
          {slideElements[0]}
         </div>,
      ];
     }
  // Clone last slide and append before the first slide
  if (slideElements.length > 1 && currentIndex === 0) {
     slides = [
       <div className="slide" key={-1}>
        {slideElements[slideElements.length - 1]}
       </div>,
       ...slides,
     ];
   }

    return slides;
  };

  return (
    <Container>
      <SlideContainer translateX={-currentIndex * 100}>
        {renderSlides()}
      </SlideContainer>
      <button onClick={handleMoveLeft}>Previous</button>
      <button onClick={handleMoveRight}>Next</button>
    </Container>
  );
};