Carousel: Set CarouselNav totalSlides to controlled (#33453)

change/@fluentui-react-carousel-6c54eead-adb1-472f-9bdd-51f424e2c9db.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Set totalSlides on CarouselNav to controlled state",
+  "packageName": "@fluentui/react-carousel",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-carousel/library/src/components/CarouselNav/useCarouselNav.ts

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
 import type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';
+import { useControllableState } from '@fluentui/react-utilities';
 
 /**
  * Create the state required to render CarouselNav.
@@ -25,14 +26,19 @@ export const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<
     unstable_hasDefault: true,
   });
 
-  const [totalSlides, setTotalSlides] = React.useState(props.totalSlides ?? 0);
+  // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context
+  const [totalSlides, setTotalSlides] = useControllableState({
+    state: props.totalSlides,
+    initialState: 0,
+  });
+
   const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);
 
   useIsomorphicLayoutEffect(() => {
     return subscribeForValues(data => {
       setTotalSlides(data.navItemsCount);
     });
-  }, [subscribeForValues]);
+  }, [subscribeForValues, setTotalSlides]);
 
   return {
     totalSlides,