fix: type and react hook issues in carousel

chaynHQ · Dec 11, 2024 · 77f1902 · 77f1902
1 parent 210269d
commit 77f1902
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/components/storyblok/StoryblokCarousel.tsx b/components/storyblok/StoryblokCarousel.tsx
@@ -67,7 +67,7 @@ export const CustomDots = () => {
       <Box>
         <Box display="flex" gap={1} alignContent="center" width="100%">
           {[...Array(totalPages)].map((_, index) => (
-            <Box>
+            <Box key={index}>
               <button
                 style={{
                   borderRadius: 50,
@@ -115,12 +115,12 @@ const StoryblokCarousel = (props: StoryblokCarouselProps) => {
   } = props;
 
   const siteTheme = useTheme();
+  const isMobileScreen = useMediaQuery(siteTheme.breakpoints.down('sm'));
 
   const getSlideWidth = () => {
-    if (useMediaQuery(siteTheme.breakpoints.down('sm'))) {
+    if (isMobileScreen) {
       return numberSlidesToWidthMap[number_mobile_slides || 1];
     }
-    return numberSlidesToWidthMap[number_desktop_slides || 1];
   };
 
   return (