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

Question

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 viewType If 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="SID" url={'submenu'} />

 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.