Popover burred underneath other components

Question

For some reason, even if I use z-index, the pop over always goes behind the second collapsable card text. Some suggest there is concept called "stacking context", but I'm not sure how to use it or understand it. Any suggestions on how to approach this would be much appreciated.

tsx:

return (
    <div className={bem('delayInformation')}>
      <div className={bem('td', 'delayCode')}>
        {code}
        <ArrowPopover
          anchor={
            <ClickableIcon
              ariaLabel={`Delay info (${code})`}
              onClick={toggleDelayInfoArrowPopover}
            >
              <Info />
            </ClickableIcon>
          }
          open={isOpen}
          offsetX={-10}
          onOutsideAction={toggleDelayInfoArrowPopover}
        >
          <div className={bem('delayDescription')}> // this is the popOver
            <Label>{code}</Label>
            {description}
          </div>
        </ArrowPopover>
      </div>
      <div className={bem('td')}>{addMinsPostfix(time)}</div>
      <div className={bem('td')}>{owner}</div>
    </div>
  );
};

CSS:

  &__delayInformation {
    display: flex;
    align-items: center;
    width: 100%;
  }

  &__delayDescription {
    width: 250px;
    @include space(padding, lg);
  }

output:output