Notification list is coming from the backend. It returns a boolean value and notification list from this list. Boolean value name is 'newNotification'. If the 'newNotification' value is false, I don't want to show the warning sign on the icon.

response screenshot (I know it's a bad show)

js

<div className="header__notification">
 <AS.Badge 
   color="primary"
   variant="dot"
   onClick={handleNotificationClick}
   className={notificationData.newNotification === false ? 'hidden' : 'header__notification'}
 >
   <AS.NotificationsOutlinedIcon className="header__notification_icon" />
 </AS.Badge>
</div>

css

.header__notification {
  .MuiBadge-root {
    .MuiBadge-badge {
      background-color: var(--palette-blue-300) !important;
      top: 8px !important;
      right: 7px !important;
    }
  }

  .hidden {
    display: none;
  }
}

I tried to come up with such a solution. But I am getting an error like this;

Uncaught TypeError: Cannot read properties of undefined (reading 'newNotification')

How can I do it?