diff --git a/package-lock.json b/package-lock.json
index e06ff6855..837fc8d32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "react-datepicker": "^4.25.0",
         "react-popper": "^2.3.0",
         "react-select": "^5.8.0",
-        "react-slick": "^0.29.0",
+        "react-slick": "^0.30.2",
         "react-toastify": "^9.1.3",
         "ryze": "^0.1.2",
         "slick-carousel": "^1.8.1"
@@ -27927,9 +27927,9 @@
       }
     },
     "node_modules/react-slick": {
-      "version": "0.29.0",
-      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz",
-      "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==",
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
       "dependencies": {
         "classnames": "^2.2.5",
         "enquire.js": "^2.1.6",
diff --git a/package.json b/package.json
index f1ca45fd6..a9c2a579b 100644
--- a/package.json
+++ b/package.json
@@ -175,7 +175,7 @@
     "react-datepicker": "^4.25.0",
     "react-popper": "^2.3.0",
     "react-select": "^5.8.0",
-    "react-slick": "^0.29.0",
+    "react-slick": "^0.30.2",
     "react-toastify": "^9.1.3",
     "ryze": "^0.1.2",
     "slick-carousel": "^1.8.1"
diff --git a/src/components/Carousel/Carousel.stories.tsx b/src/components/Carousel/Carousel.stories.tsx
index 40d003310..3cb885562 100644
--- a/src/components/Carousel/Carousel.stories.tsx
+++ b/src/components/Carousel/Carousel.stories.tsx
@@ -34,7 +34,7 @@ export const Default: Story = {
     slidesToShow: 2,
     variableWidth: false,
   },
-  decorators: [(StoryIns) => <div style={{ display: 'block', width: '100%' }}>{StoryIns()}</div>],
+  decorators: [(StoryIns) => <div style={{ display: 'block', maxWidth: 680 }}>{StoryIns()}</div>],
 };
 
 export const usePreventSwipeClicks = {
@@ -61,5 +61,5 @@ export const usePreventSwipeClicks = {
     slidesToShow: 2,
     variableWidth: false,
   },
-  decorators: [(StoryIns) => <div style={{ display: 'block', width: '100%' }}>{StoryIns()}</div>],
+  decorators: [(StoryIns) => <div style={{ display: 'block', maxWidth: 680 }}>{StoryIns()}</div>],
 };
diff --git a/src/components/Carousel/index.spec.jsx b/src/components/Carousel/index.spec.jsx
index 0d4b2e630..9611aea76 100644
--- a/src/components/Carousel/index.spec.jsx
+++ b/src/components/Carousel/index.spec.jsx
@@ -24,16 +24,13 @@ it('should render with defaults', () => {
 it('should render with slides', () => {
   render(
     <Carousel>
-      <img data-testid="carousel-image-wrapper" src="path/to/image-1.jpg" alt="1" />
-      <img data-testid="carousel-image-wrapper" src="path/to/image-2.jpg" alt="2" />
+      <img data-testid="carousel-image" src="path/to/image-1.jpg" alt="1" />
+      <img data-testid="carousel-image" src="path/to/image-2.jpg" alt="2" />
     </Carousel>
   );
-  screen.getAllByTestId('carousel-image-wrapper').forEach((each) => {
-    expect(each).toBeInTheDocument();
-  });
-  screen.getAllByTestId('carousel-image-wrapper').forEach((each, index) => {
-    expect(each).toHaveAttribute('src', `path/to/image-${index + 1}.jpg`);
-  });
+  const [a, b] = screen.getAllByTestId('carousel-image');
+  expect(a).toHaveAttribute('src', 'path/to/image-1.jpg');
+  expect(b).toHaveAttribute('src', 'path/to/image-2.jpg');
 });
 
 it('should be able to navigate to the next image', async () => {