import React, { useCallback, useState } from 'react'

import { showOverlay } from 'react-show-overlay'

const OverlayModal = ({ _isOpen = true }: { _isOpen?: boolean }) => {
  const [isOpen, setOpen] = useState(_isOpen)
  return isOpen ? <div onClick={() => setOpen(false)}>content</div> : null
}

const Example = () => {
  const handleClick = useCallback(() => {
    showOverlay({
      children: <OverlayModal />
    })
  }, [])
  return (
    <div>
      main content.
      <button onClick={handleClick}>Click Me!</button>
    </div>
  )
}