Ant Popover does not hide even ant-popover-hidden is applied

I am using antd version “^4.9.2”. Ant Popover component is displayed and it shows the pop up but when it hides ‘ant-popover-hidden’ is shown in the html tag in the elements section of chrome web debugging tool but style is not being applied. Look in the styles section of chrome web debugging tool and ‘ant-popover-hidden’ is missing.

What could be the reason ? Popover content never gets out of the screen as display style is never none.

Event onVisibleChange shows the correct result. When popover has to be removed it shows visible false and when popover becomes visible it shows the result as true.


const onVisibleChange = (visible:boolean) => {
      console.log(`Popover visible ${visible}`)
}

<Popover
      trigger="click"
      placement="bottom"
      ref={popoverRef}
      align={{ offset: [-2, 0] }}
      content={popoverContent}
      overlayClassName={styles.popover}
      onVisibleChange={onVisibleChange}
      animation=''
      transitionName=''
      >
      <div data-buyersellerRendererInside className={cx(styles.container)} data-popover={maxSizeLength}>
        <div className={styles.companyName}>{val[0]?.substring(0,5)}</div>
      </div>
    </Popover>

can any expert please provide what could be the issue?

Web Console Image