MUI 5 - change anchor when element is hidden

I have created an MUI table and added a popover for each row. my problem is when the screen size is small my table is scrolled and the popover is shown outside of the table parent. I want it to be shown at the end of the parent component

table row component:

  const TableRow: FC<TableRowPropTypes> = props => {
  const { children, ariaHasPopup } = props;
  const [anchorEl, setAnchorEl] = useState<HTMLTableRowElement | null>(null);
  const anchorRef = useRef<HTMLTableRowElement>(null);
  const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
  const hidden = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
  const open = Boolean(anchorEl);

  const handleHover = async () => {
    await delay(100);
    setAnchorEl(anchorRef.current);
  };

  const handleClose = async () => {
   await delay(100);
   setAnchorEl(null);
  };
  return (
   <>
    <MuiTableRow
     aria-owns={open ? 'mouse-over-popover' : undefined}
     aria-haspopup={ariaHasPopup}
     ref={anchorRef}
     onMouseOver={handleHover}
     onMouseOut={handleClose}
   >
    {children}
  </MuiTableRow>
  {hidden ? (
    <PopoverComponent
      open={open}
      anchorEl={anchorEl}
      handleHover={handleHover}
      handleClose={handleClose}
      anchorOrigin={{
        vertical: 'center',
        horizontal: 'left',
      }}
      transformOrigin={{
        vertical: 'center',
        horizontal: 'left',
      }}
    >
      <IconComponent name="Dele" size="1.4rem" />
    </PopoverComponent>
  ) : null}
</>
  );
  };

  export default TableRow;

popover component:

import { Box, Popover as MuiPopover, Typography } from '@mui/material';

import type { FC } from 'react';
import type { PopoverPropTypes } from './Popover.d';

const Popover: FC<PopoverPropTypes> = props => {
const { open, anchorEl, handleHover, handleClose, children, anchorOrigin, 
transformOrigin } = props;

return (
 <MuiPopover
  id="mouse-over-popover"
  sx={{
    pointerEvents: 'none',
  }}
  open={open}
  anchorEl={anchorEl}
  anchorOrigin={anchorOrigin}
  transformOrigin={transformOrigin}
  PaperProps={{
    onMouseEnter: handleHover,
    onMouseLeave: handleClose,
    sx: {
      pointerEvents: 'auto',
    },
  }}
  disableRestoreFocus
>
  <Box>{children}</Box>
</MuiPopover>
);
};

 export default Popover;

this is what I want:

this is what happens: