MUI Popper appears at the top-left corner irrespective of specified position

Question

I am using MUI popper component in my application. On the button click the popper must appear beside the button but even though the specified position is mentioned, the popper is appearing in the top left corner of the web page.

Here's the code implementation for further reference

Popper part

<ClickAwayListener onClickAway={clickAwayHandler}>
  <Popper
    open={open}
    anchorEl={newanchorEl}
    placement={placement}
    id="left-popper"
    modifiers={{
      preventOverflow: {
        enabled: true,
        escapeWithReference: true,
        boundariesElement: "viewport",
      },
    }}
  >
    <Paper className={tooltipClasses.tooltipContainer}>
      <div className={tooltipClasses.chipsLayout}>
        <div className={tooltipClasses.tooltip}></div>
        <div className={tooltipClasses.chipsOverlayStylings}>
          {popperTags.map((option: any, index: number) => {
            const getTagPropsObject = getTagProps({ index });
            return (
              //another component
            );
          })}
        </div>
      </div>
    </Paper>
  </Popper>
</ClickAwayListener>

Onclick of this button popper must comeup

<Button
  variant="text"
  color="primary"
  size="small"
  style={{ minWidth: 0 }}
  onClick={onClickHandler("right-start")}
>
  <b>Click here</b>
</Button>

handleAdvFilterTooltipClick function

const onClickHandler =
  (newPlacement: PopperPlacementType | undefined) =>
  (event: React.MouseEvent<HTMLButtonElement>) => {
    setNewAnchorEl(event.currentTarget);
    setOpen((prev) => placement !== newPlacement || !prev);
    setPlacement("right-start");
  }