request - close popover when clicked inside about react-tiny-popover HOT 1 OPEN

import Popover, { PopoverProps } from "react-tiny-popover";

interface ContentProps {
  closePopup: () => any;
}

interface ClickoverProps {
  Content: FunctionComponent<ContentProps>;
  hideOnOutsideClick?: boolean;
  align?: PopoverProps["align"];
  padding?: number;
  position?: PopoverProps["position"];
  onVisibleChange?: (changed: boolean) => any;
}

export const Clickover: FunctionComponent<ClickoverProps> = ({
  Content,
  position = "bottom",
  align = "end",
  padding = 0,
  hideOnOutsideClick = true,
  children,
  onVisibleChange
}) => {
  const [visible, setVisible] = useState(false);

  return (
    <Popover
      content={() => (
        <div css={styles.popup} onClick={e => e.stopPropagation()}>
          <Content
            closePopup={() => {
              setVisible(false);
              onVisibleChange && onVisibleChange(false);
            }}
          />
        </div>
      )}
      isOpen={visible}
      onClickOutside={() => {
        hideOnOutsideClick && setVisible(false);
        onVisibleChange && onVisibleChange(false);
      }}
      windowBorderPadding={40}
      padding={padding}
      position={position}
      align={align}
    >
      <div
        onClick={() => {
          onVisibleChange && onVisibleChange(!visible);
          setVisible(!visible);
        }}
      >
        {children}
      </div>
    </Popover>
  );
};