MUI ClickAwayListener closing the modal itself when clicked (React.Js)

The required functionality for modal is that when clicked on the 'More' button, it should be visible and when either the More button or any other part of the screen is clicked (excluding the modal itself), the modal should be closed. I have tried various ways starting from https://usehooks-typescript.com/react-hook/use-on-click-outside & MUI's ClickAwayListener.

<ClickAwayListener
  onClickAway={handleClickAway}
>
  <div style={{ position: 'relative' }}>
    <button
      onClick={(e: any) => {
        e.stopPropagation();
        setModalVisible(!modalVisible);
      }}
    >
      More
    </button>
    <Modal
      visible={modalVisible}
      id="btn-container"
    >
        {dummy.map((str: string) => {
          return <span>{str}</span>;
        })}
    </Modal>
  </div>
</ClickAwayListener>

const handleClickAway = (e: any) => {
    if (e.target.localName === 'body') {
      e.preventDefault();
      return;
    }

    setModalVisible(false);
  };

const Modal = styled.div`
  position: absolute;
  top: 30px;
  left: -200px;
  background: #fff;
  padding: 25px;
  z-index: 8;
  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  width: 250px;
  max-height: 320px;
  overflow-y: auto;
`;

Basically, the ClickAwayListener is not able to detect it's child component and is closing the modal even when I click inside the modal which should not be the functionality.

'Modal' component used here isn't a materialui component, it's a styled component that I built myself