diff --git a/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx b/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx
index d86a6448..ed0d568f 100644
--- a/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx
+++ b/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx
@@ -51,6 +51,10 @@ export const CanvasBreadcrumb = React.memo((props: IBreadcrumbProps): React.Reac
 
     const breadcrumbItems: IBreadcrumbItem[] = getBreadcrumbItems(items, onClick);
 
+    // onReduceData is required to prevent breadcrumb from shrinking
+    // when item changes dynamically
+    const returnUndefined = () => undefined;
+
     return (
         <ThemeProvider applyTo="none" theme={theme} ref={rootRef}>
             <CustomBreadcrumb
@@ -59,6 +63,7 @@ export const CanvasBreadcrumb = React.memo((props: IBreadcrumbProps): React.Reac
                 maxDisplayedItems={maxDisplayedItems}
                 aria-label={ariaLabel}
                 overflowIndex={overflowIndex}
+                onReduceData={returnUndefined}
             />
         </ThemeProvider>
     );
diff --git a/Breadcrumb/package-lock.json b/Breadcrumb/package-lock.json
index e1955369..3c81301b 100644
--- a/Breadcrumb/package-lock.json
+++ b/Breadcrumb/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@fluentui/react": "8.29.0",
-        "@fluentui/react-hooks": "^8.5.4",
+        "@fluentui/react-hooks": "8.5.4",
         "react": "16.8.6",
         "react-dom": "16.8.6"
       },
diff --git a/Breadcrumb/package.json b/Breadcrumb/package.json
index c7f9d8a9..220f63d3 100644
--- a/Breadcrumb/package.json
+++ b/Breadcrumb/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@fluentui/react": "8.29.0",
-    "@fluentui/react-hooks": "^8.5.4",
+    "@fluentui/react-hooks": "8.5.4",
     "react": "16.8.6",
     "react-dom": "16.8.6"
   },