diff --git a/.changeset/nervous-rabbits-love.md b/.changeset/nervous-rabbits-love.md
new file mode 100644
index 0000000000..a8252a836e
--- /dev/null
+++ b/.changeset/nervous-rabbits-love.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/progress-steps": patch
+"@twilio-paste/core": patch
+---
+
+[ProgressSteps] fixed an issue where progress steps was rerendering unnecessarily
diff --git a/internal-docs/engineering/gotchas.md b/internal-docs/engineering/gotchas.md
new file mode 100644
index 0000000000..3fda417ae8
--- /dev/null
+++ b/internal-docs/engineering/gotchas.md
@@ -0,0 +1,7 @@
+# Gotchas
+
+The purpose of this document is to keep a list of niche issues that have arisen over the lifetime of the product that we do not want to re-introduce. This can be related to our coded or third party libraries.
+
+## Emotion Library
+
+* If you pass a prop of the component into `styled.div` be sure to wrap it in useMemo as this librabry causes unnecessary re-renders otherwise.
\ No newline at end of file
diff --git a/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx b/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx
index c8e121984b..ece3d8ac5c 100644
--- a/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx
+++ b/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx
@@ -89,11 +89,15 @@ const ItemSeparatorStyles: {
 
 export const ProgressSteps = React.forwardRef<HTMLDivElement, ProgressStepsProps>(
   ({ element = "PROGRESS_STEPS", orientation = "horizontal", ...props }, ref) => {
-    const ContainerStyled = styled.div(
-      css({
-        display: "flex",
-        ...ItemSeparatorStyles[orientation],
-      }),
+    const ContainerStyled = React.useMemo(
+      () =>
+        styled.div(
+          css({
+            display: "flex",
+            ...ItemSeparatorStyles[orientation],
+          }),
+        ),
+      [orientation],
     );
 
     return (