diff --git a/packages/components/src/core/Callout/components/CalloutTitle/index.tsx b/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
index b0098d5b5..2acc262a9 100644
--- a/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
+++ b/packages/components/src/core/Callout/components/CalloutTitle/index.tsx
@@ -5,4 +5,7 @@ const CalloutTitle = ({ children }: AlertTitleProps): JSX.Element => {
   return <StyledCalloutTitle>{children}</StyledCalloutTitle>;
 };
 
+// Display name required to ensure Callout expand works correctly.
+CalloutTitle.displayName = "CalloutTitle";
+
 export default CalloutTitle;
diff --git a/packages/components/src/core/Callout/index.tsx b/packages/components/src/core/Callout/index.tsx
index 046550b09..ade5348cf 100644
--- a/packages/components/src/core/Callout/index.tsx
+++ b/packages/components/src/core/Callout/index.tsx
@@ -100,7 +100,9 @@ const Callout = ({
   let calloutContent;
 
   const firstChildIsCalloutTitle =
-    Array.isArray(children) && children[0]?.type?.name === "CalloutTitle";
+    Array.isArray(children) &&
+    children[0]?.type?.displayName === "CalloutTitle";
+
   if (firstChildIsCalloutTitle) {
     [calloutTitle, ...calloutContent] = children;
   }