From 4b150059a2c9993ab3042545d4507229c56e6ba3 Mon Sep 17 00:00:00 2001
From: Melvin Chen <melvin.chen@formidable.com>
Date: Tue, 14 Jan 2025 11:50:08 -0800
Subject: [PATCH] Fix bug with always starting at 0

---
 packages/nuka/src/Carousel/Carousel.stories.tsx |  2 +-
 packages/nuka/src/hooks/use-paging.tsx          | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nuka/src/Carousel/Carousel.stories.tsx b/packages/nuka/src/Carousel/Carousel.stories.tsx
index fc50a65f..be2b5c62 100644
--- a/packages/nuka/src/Carousel/Carousel.stories.tsx
+++ b/packages/nuka/src/Carousel/Carousel.stories.tsx
@@ -169,7 +169,7 @@ export const GoToPage: Story = {
   },
 };
 
-export const InitialSlide: Story = {
+export const InitialPage: Story = {
   args: {
     initialPage: 2,
     scrollDistance: 'slide',
diff --git a/packages/nuka/src/hooks/use-paging.tsx b/packages/nuka/src/hooks/use-paging.tsx
index 63fa4b67..0f0b0fe4 100644
--- a/packages/nuka/src/hooks/use-paging.tsx
+++ b/packages/nuka/src/hooks/use-paging.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { CarouselProps } from '../types';
 
@@ -20,11 +20,13 @@ export function usePaging({
   wrapMode,
   initialPage,
 }: PagingProps): UsePagingReturnType {
-  const [currentPage, setCurrentPage] = useState(
-    initialPage && initialPage >= 0 && initialPage < totalPages
-      ? initialPage
-      : 0,
-  );
+  const [currentPage, setCurrentPage] = useState(0);
+
+  useEffect(() => {
+    if (initialPage) {
+      setCurrentPage(Math.max(0, Math.min(initialPage, totalPages)));
+    }
+  }, [initialPage, totalPages]);
 
   const goToPage = (idx: number) => {
     if (idx < 0 || idx >= totalPages) return;