diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index f1b51e497f..8cdb8f75aa 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -221,7 +221,7 @@ const ItemWithSubmenu = ({
color="secondary"
variant="dot"
overlap="circular"
- className={isOpen ? undefined : classes.closedItemIcon}
+ className={isOpen ? '' : classes.closedItemIcon}
invisible={!hasNotifications}
>
@@ -251,7 +251,7 @@ const ItemWithSubmenu = ({
>
{isOpen ? openContent : closedContent}
@@ -372,7 +372,7 @@ export const SidebarItem = forwardRef
((props, ref) => {
variant="dot"
overlap="circular"
invisible={!hasNotifications}
- className={clsx(isOpen ? undefined : classes.closedItemIcon)}
+ className={clsx({ [classes.closeItemIcon]: !isOpen })}
>
@@ -403,7 +403,7 @@ export const SidebarItem = forwardRef((props, ref) => {
classes.root,
isOpen ? classes.open : classes.closed,
isButtonItem(props) && classes.buttonItem,
- disableHighlight ? undefined : classes.highlightable,
+ { [classes.highlightable]: !disableHighlight },
),
};