text: import * as React from 'react';
  import Box from '@material-ui/core/Box';
  import ClickAwayListener from '@material-ui/core/ClickAwayListener';
  import Portal from '@material-ui/core/Portal';
  
  export default function PortalClickAway() {
    const [open, setOpen] = React.useState(false);
  
    const handleClick = () => {
      setOpen((prev) => !prev);
    };
  
    const handleClickAway = () => {
      setOpen(false);
    };
  
    const styles = {
      position: 'fixed',
      width: 200,
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      border: '1px solid',
      p: 1,
      bgcolor: 'background.paper',
    };
  
    return (
      <ClickAwayListener onClickAway={handleClickAway}>
        <div>
          <button type="button" onClick={handleClick}>
            Open menu dropdown
          </button>
          {open ? (
            <Portal>
              <Box sx={styles}>
                Click me, I will stay visible until you click outside.
              </Box>
            </Portal>
          ) : null}
        </div>
      </ClickAwayListener>
    );
  }
  