Why does the component not called if I call and assigned it to a variable?

I am using a countBadge component which is called in parent and assigned to a variable;It is passed to the child; In child it will show badge based on viewTypeIf viewType is fullView, count badge will be shown else countBadge will not be shown;

But countBadge component is called only when the viewType is changed to fullView;

When it is changed to fullView then only the component is called and api for count inside it is called;Each time when the viewType is changed to fullView, API for count is called;

  const countBadge = <CountBadgeWithListener id="NA_INFAX" url={'fax/inbox'} /> return (<SideMenuWithSubMenu                    icon={<SubmenuIcon />}                    headerText="Submenu"                    subMenuItems={[                      {                        to: '/submenu',                        text: 'Inbox',                        notification: countBadge                      }                    ]}                  />  )

In the child component notification prop is displayed

             {viewType=== 'fullView'&& <Box sx={{ pr: 3 }}>{item.notification}</Box> }

I dont want to mount the countBadge component each time viewType is changed.