fix(Carousel): fix index not being reset when children change

src/Carousel/Carousel.tsx

@@ -8,7 +8,8 @@ import {
   ReactChildren,
   useTimeout,
   mergeRefs,
-  useControlled
+  useControlled,
+  useUpdateEffect
 } from '../utils';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 
@@ -67,10 +68,22 @@ const Carousel: RsRefForwardingComponent<'div', CarouselProps> = React.forwardRe
     const vertical = placement === 'left' || placement === 'right';
     const lengthKey = vertical ? 'height' : 'width';
 
-    const [activeIndex, setActiveIndex] = useControlled(activeIndexProp, defaultActiveIndex);
+    const [activeIndex, setActiveIndex, isControlled] = useControlled(
+      activeIndexProp,
+      defaultActiveIndex
+    );
     const [lastIndex, setLastIndex] = useState(0);
     const rootRef = useRef<HTMLDivElement>(null);
 
+    useUpdateEffect(() => {
+      // When the index is controlled, the index is not updated when the number of children changes.
+      if (isControlled) {
+        return;
+      }
+      // Reset the index when the number of children changes.
+      setActiveIndex(0);
+    }, [children, isControlled]);
+
     // Set a timer for automatic playback.
     // `autoplay` needs to be cast to boolean type to avoid undefined parameters.
     const { clear, reset } = useTimeout(

src/Carousel/test/CarouselSpec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Simulate } from 'react-dom/test-utils';
 import sinon from 'sinon';
 import { getDOMNode } from '@test/testUtils';
-import { render, act, waitFor, fireEvent, screen } from '@testing-library/react';
+import { render, screen, act, waitFor, fireEvent } from '@testing-library/react';
 import { testStandardProps } from '@test/commonCases';
 import Carousel from '../Carousel';
 
@@ -164,4 +164,25 @@ describe('Carousel', () => {
     expect(screen.getByText('3')).to.have.attr('aria-hidden', 'true');
     expect(screen.getByText('4')).to.have.attr('aria-hidden', 'false');
   });
+
+  it('Should reset index when children change', () => {
+    const { rerender } = render(
+      <Carousel defaultActiveIndex={2}>
+        <button>1</button>
+        <button>2</button>
+        <button>3</button>
+        <button>4</button>
+      </Carousel>
+    );
+
+    expect(screen.getByText('3')).to.have.attribute('aria-hidden', 'false');
+
+    rerender(
+      <Carousel defaultActiveIndex={2}>
+        <button>1</button>
+      </Carousel>
+    );
+
+    expect(screen.getByText('1')).to.have.attribute('aria-hidden', 'false');
+  });
 });