ReactJS Material-UI how to fix a component on top of an anchored menu

I'm using Material-UI and I'm trying to place a fixed component on top of an anchored menu, that is to say I have a button that I click and then a menu is displayed. I need to put a component on top of this menu and keep it visible all the time, something like this:

but when I scroll down, the component scrolls too. I need to keep this visible despite the position of the scroll.

These are the approaches I've been trying:

const renderMenu = () => {
    const items = [];
    for (let i = 0; i < 20; i += 1) {
      items.push(`Item ${i + 1}`);
    }
    return (
      <>
        {"Test one"}               <-----
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          PaperProps={{
            style: {
              maxHeight: "200px"
            }
          }}
          open={Boolean(anchorEl)}
          onClose={handleClose}
        >
          {"Test two"}             <-----
          {items.map((item) => (
            <MenuItem onClick={handleClose}>{item}</MenuItem>
          ))}
        </Menu>
      </>
    );
  };

  return (
    <>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
        style={{ float: "right" }}
      >
        Click on me
      </Button>
      {anchorEl && renderMenu()}
    </>
  );

Test one is displayed outside the popup and Test two scrolls away. Here is a working codesandbox.

Any idea on how to solve this?