diff --git a/packages/side-nav/src/SideNavGroup/SideNavGroup.tsx b/packages/side-nav/src/SideNavGroup/SideNavGroup.tsx
index 8dcc827482..5b0bcf78f9 100644
--- a/packages/side-nav/src/SideNavGroup/SideNavGroup.tsx
+++ b/packages/side-nav/src/SideNavGroup/SideNavGroup.tsx
@@ -49,6 +49,11 @@ function SideNavGroup({
   const renderedChildren = useMemo(() => {
     const checkForNestedGroups = (children: React.ReactNode) => {
       return React.Children.map(children, child => {
+        if ((child as React.ReactElement)?.props?.children) {
+          checkForNestedGroups((child as React.ReactElement).props.children);
+          return child;
+        }
+
         if (
           isComponentType(child, 'SideNavGroup') ||
           isComponentType(child, 'SideNavItem')
@@ -56,12 +61,9 @@ function SideNavGroup({
           return React.cloneElement(child, {
             indentLevel: indentLevel + 1,
           });
-        } else if ((child as React.ReactElement)?.props?.children) {
-          checkForNestedGroups((child as React.ReactElement).props.children);
-          return child;
-        } else {
-          return child;
         }
+
+        return child;
       });
     };
 
@@ -96,7 +98,7 @@ function SideNavGroup({
 
   // render the provided glyph with appropriate aria roles
   const accessibleGlyph =
-    glyph && isComponentGlyph(glyph)
+    glyph && isComponentGlyph(glyph as React.ReactElement)
       ? React.cloneElement(glyph, {
           className: glyph.props.className,
           role: 'presentation',
diff --git a/packages/side-nav/src/SideNavGroup/SideNavGroup.types.ts b/packages/side-nav/src/SideNavGroup/SideNavGroup.types.ts
index 6ed5d00c98..812b00843b 100644
--- a/packages/side-nav/src/SideNavGroup/SideNavGroup.types.ts
+++ b/packages/side-nav/src/SideNavGroup/SideNavGroup.types.ts
@@ -19,7 +19,7 @@ interface SideNavGroupBaseProps extends HTMLElementProps<'li'> {
    *
    * @type `<Icon />`
    */
-  glyph?: React.ReactNode;
+  glyph?: React.ReactElement;
 
   /**
    * Manually overrides automatic detection of whether a group contains an active item.
diff --git a/packages/side-nav/src/SideNavItem/SideNavItem.tsx b/packages/side-nav/src/SideNavItem/SideNavItem.tsx
index e322fdf904..acfd62a47e 100644
--- a/packages/side-nav/src/SideNavItem/SideNavItem.tsx
+++ b/packages/side-nav/src/SideNavItem/SideNavItem.tsx
@@ -84,7 +84,7 @@ const SideNavItem: ExtendableBox<
       };
 
   const accessibleGlyph =
-    glyph && isComponentGlyph(glyph)
+    glyph && isComponentGlyph(glyph as React.ReactElement)
       ? React.cloneElement(glyph, { 'aria-hidden': true })
       : null;
 
diff --git a/packages/side-nav/src/SideNavItem/SideNavItem.types.ts b/packages/side-nav/src/SideNavItem/SideNavItem.types.ts
index 25551f1f8b..1e71c8dff7 100644
--- a/packages/side-nav/src/SideNavItem/SideNavItem.types.ts
+++ b/packages/side-nav/src/SideNavItem/SideNavItem.types.ts
@@ -47,7 +47,7 @@ export interface SideNavItemProps {
    *
    * @type `<Icon />`
    */
-  glyph?: React.ReactNode;
+  glyph?: React.ReactElement;
 
   /**
    * Changes the indentation. Will not work if `<SideNavItem>` is a child of `<SideNavGroup>`.