Hello everyone I am making a my orders page which shows the orders placed by that user.I am displaying order deatils in a table row using map function. Now there is one button at the last of each row which should open Popper(beside that button)when clicked on it.I am using Material UI Popper component for that.Now when I Click on any button Popper appears on the top left corner of the screen instead of beside the button. Warning on console is The anchorEl prop provided to the component is invalid.
The anchor element should be part of the document layout.
Make sure the element is present in the document or that it’s not display none.

Here is my code implementation:

<TableContainer component={Paper} sx={{
                minHeight: "490px"
            }}>
                <Table>
                    <TableHead>
                        <TableRow>
                            <StyledTableCell>Order Number</StyledTableCell>
                            <StyledTableCell>Order Date</StyledTableCell>
                            <StyledTableCell>Order Status</StyledTableCell>
                            <StyledTableCell>Paper Name</StyledTableCell>
                            <StyledTableCell>Paper Link</StyledTableCell>
                            <StyledTableCell>Paper Doi</StyledTableCell>
                            <StyledTableCell>Number of Citations</StyledTableCell>
                            <StyledTableCell>Total Amount</StyledTableCell>
                            <StyledTableCell />
                        </TableRow>
                    </TableHead>
                    <TableBody>
                    {visibleRows && visibleRows?.length > 0 ? visibleRows?.map((order, index) => {
                        return (
                                <OrderDetails order={order} key={index}/>
                        )
                    }) :
                        <Typography variant="h3" sx={{
                            position: "absolute",
                            top: "66%",
                            left: "39%"
                        }}>No Record Found</Typography>
                    }
                        </TableBody>
                </Table>
</TableContainer>

export function OrderDetails({ order }: { order: IOrder }) {
    //const [editModalOpen, setEditModalOpen] = useState<boolean>(false)
    //const [cancelModalOpen, setCancelModalOpen] = useState<boolean>(false)
    const [open, setOpen] = useState(false);
    const anchorRef = useRef<HTMLButtonElement>(null);
    
    const handleToggle = () => {
        setOpen((prevOpen) => !prevOpen);
      };
    
      const handleClose = (event: Event | React.SyntheticEvent) => {
        if (
          anchorRef.current &&
          anchorRef.current.contains(event.target as HTMLElement)
        ) {
          return;
        }
    
        setOpen(false);
      };
    

    //const EditOrderOpen = useCallback(() => {
      //  setEditModalOpen(true);
    //}, []);

    //const CancelOrderOpen = useCallback(() => {
      //  setCancelModalOpen(true);
    //}, []);

    const convertDateFormat = ((dateString: Date) => {
        const date = new Date(dateString);

        return String(date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear())
    })

    const StyledTableCell = styled(TableCell)(({ theme }) => ({
        [`&.${tableCellClasses.head}`]: {
            backgroundColor: theme.palette.common.black,
            color: theme.palette.common.white,
        },
        [`&.${tableCellClasses.body}`]: {
            fontSize: 16,
        },
    }));

    const StyledTableRow = styled(TableRow)(({ theme }) => ({
        '&:nth-of-type(odd)': {
            backgroundColor: theme.palette.action.hover,
        },
        // hide last border
        '&:last-child td, &:last-child th': {
            border: 0,
        },
    }));

    const kebabOption = [
        {
            type: "ACTION",
            title: "Edit Order details",
            id: "01",
            action: EditOrderOpen
        },
        {
            type: "ACTION",
            title: "Cancel Order",
            id: "01",
            action: CancelOrderOpen
        }

    ];

    return (
        <StyledTableRow>
            <StyledTableCell>{order.orderNumber}</StyledTableCell>
            <StyledTableCell>{convertDateFormat(order.orderedAt)}</StyledTableCell>
            <StyledTableCell sx={{
                color: order.orderStatus === "Success" ? "green" : "red"
            }}>{order.orderStatus}</StyledTableCell>
            <StyledTableCell>{order.paperName}</StyledTableCell>
            <StyledTableCell>{order.paperLink}</StyledTableCell>
            <StyledTableCell>{order.paperDoi}</StyledTableCell>
            <StyledTableCell align="center">{String(order.numofCitation)}</StyledTableCell>
            <StyledTableCell align="center">{String(order.amount)}$</StyledTableCell>
            <StyledTableCell ><IconButton onClick={(e)=>{e.stopPropagation(); handleToggle()}} ref={anchorRef}><MoreVertIcon /></IconButton></StyledTableCell>
            {/* {open && */}
            <VerticalMenuComponent
                open={open}
                setOpen={setOpen}
                handleClose={handleClose}
                anchorRef={anchorRef}
                kebabOption={kebabOption}
            />
        </StyledTableRow>
    )
}

export function VerticalMenuComponent({
    handleClose,
    kebabOption,
    anchorRef,
    open,
    setOpen,
}: IVerticalMenuComponent) {
    return (
        <Popper
            open={open}
            anchorEl={anchorRef?.current}
            role={undefined}
            placement="bottom-start"
            transition
            disablePortal
            onMouseLeave={() => {
                setOpen && setOpen(false)
            }}
        >
            {({ TransitionProps, placement }) => (
                <Grow
                    {...TransitionProps}
                    style={{
                        transformOrigin:
                          placement === 'bottom-start' ? 'right top' : 'right bottom',
                      }}
                >
                    <Paper>
                        <ClickAwayListener onClickAway={handleClose}>
                            <MenuList
                                autoFocusItem={open}
                                id="composition-menu"
                                aria-labelledby="composition-button"
                                sx={{ mb: '0', pb: '0', pt:'0'}}
                            >
                                {kebabOption &&
                                    kebabOption.map((item, index) => {
                                        return (
                                            <Box key={index}>
                                                {(() => {
                                                    switch (item.type) {
                                                        case 'LINK':
                                                            return (
                                                                <MenuItem
                                                                    key={index}
                                                                    divider={true}
                                                                    onClick={( e) => { handleClose(e)}}
                                                                    autoFocus={true}
                                                                >
                                                                    <Link
                                                                        href={item.path ?? "#"}
                                                                        style={{
                                                                            textDecoration:"none",
                                                                            color:"black"
                                                                        }}
                                                                    >
                                                                        {item.title}
                                                                    </Link>
                                                                </MenuItem>
                                                            )
                                                        case 'ACTION':
                                                            return (
                                                                <MenuItem
                                                                    key={index}
                                                                    divider={ true}
                                                                    onClick={(e) => {handleClose(e)
                                                                        item.action &&
                                                                            item.action()
                                                                    }}
                                                                    autoFocus={true}
                                                                    sx={{
                                                                        color:"black"
                                                                    }}
                                                                >
                                                                    {item.title}
                                                                </MenuItem>
                                                            )
                                                        default:
                                                            return null
                                                    }
                                                })()}
                                            </Box>
                                        )
                                    })}
                            </MenuList>
                        </ClickAwayListener>
                    </Paper>
                </Grow>
            )}
        </Popper>
    );
}