message: fix up useEffect linting errors
diff: -import React, {useState, useEffect, useRef} from 'react'
  +import React, {useState, useEffect, useCallback, useRef} from 'react'
  import PropTypes from 'prop-types'
  import styled from 'styled-components'
  import {COMMON} from './constants'
  @@ -27,6 +27,17 @@ function DetailsBase({children, overlay, render = getRenderer(children), default
  const [open, setOpen] = useState(defaultOpen)
  const ref = useRef(null)
  + const closeMenu = useCallback(
  + (event) => {
  + // only close the menu if we're clicking outside
  + if (event && event.target.closest('details') !== ref.current) {
  + setOpen(false)
  + document.removeEventListener('click', closeMenu)
  + }
  + },
  + [ref]
  + )
  +
  useEffect(() => {
  if (overlay && open) {
  document.addEventListener('click', closeMenu)
  @@ -34,20 +45,12 @@ function DetailsBase({children, overlay, render = getRenderer(children), default
  document.removeEventListener('click', closeMenu)
  }
  }
  - }, [open, overlay])
  + }, [open, overlay, closeMenu])
  function toggle(event) {
  setOpen(event.target.open)
  }
  - function closeMenu(event) {
  - // only close the menu if we're clicking outside
  - if (event && event.target.closest('details') !== ref.current) {
  - setOpen(false)
  - document.removeEventListener('click', closeMenu)
  - }
  - }
  -
  return (
  <DetailsReset {...rest} ref={ref} open={open} onToggle={toggle} overlay={overlay}>
  {render({open})}
  