useOutsideClick

function MyApp() {
  const [isOpen, setIsOpen] = React.useState(false)
  const containerRef = React.useRef(null)
  const triggerRef = React.useRef(null)

  const closeOverlay = React.useCallback(() => {
    setIsOpen(false)
  }, [setIsOpen])

  const toggleOverlay = React.useCallback(() => {
    setIsOpen(!isOpen)
  }, [setIsOpen, isOpen])

  useOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [triggerRef]})

  return (
    <>
      <Button ref={triggerRef} onClick={toggleOverlay}>
        toggle
      </Button>
      {isOpen && (
        <Box
          borderWidth="1px"
          borderStyle="solid"
          borderColor="border.accent.teal"
          borderRadius={2}
          height="212px"
          mt="24px"
          bg="background.accent.teal.bolder"
          display="flex"
          alignItems={`center`}
          justifyContent={`center`}
          ref={containerRef}
        >
          This is the content. useClickOutside takes a callback function that is called when clicking outside of the
          target `ref`.
        </Box>
      )}
    </>
  )
}
render(<MyApp />)