Why is position: sticky not working for the panel but works for the table header and rows?

I am trying to add a shadow effect using ::after on a sticky element inside a flex container, but it is not working as expected. Instead, it overrides the main table.

When I use position: relative; and position: absolute;, the shadow appears, but only after scrolling horizontally. I need it to behave like the sticky elements in my table header and rows, which remain visible while scrolling.

The same approach works for the header and rows but not for the panel. How can I achieve the same sticky shadow effect for the panel?

  const CollapseWrapper = styled.div`  display: flex;  background-color: #cacaca;  border-bottom: 1px solid black;  user-select: none;  width: 1750px;  ::after {    content: "";    position: fixed;    width: 140px;    height: 100%;    right: 0;    top: 0;    pointer-events: none;    box-shadow: -3px 0px 4px -2px rgba(0, 0, 0, 0.45);  }`;

Codesandbox Reference https://codesandbox.io/p/sandbox/busy-nightingale-pxcf5j

Problem look at the right side just below price there should be box shadowExpected Output