How to use the react-use/lib/useToggle function in react-use

export default function Header() {
  const session = useSession();
  const [open, toggle] = useToggle(false);

  useEffect(() => {
    if (session.value && !session.value.user && window.location.search) {
      const params = qs.parse(window.location.search.slice(1));
      try {
        if (params.openLogin && JSON.parse(params.openLogin)) {
          toggle(true);
        }
      } catch (err) {
        // Do nothing
      }
    }
  }, [session]);

  return (
    <nav></nav>

const CommentCell = ({ product, comment, loading, onReply = noop, level = 1 }) => {
  const isCreator = get(product, 'creators', []).some(x => x.id === comment.user.id)
  const isDiscoverer = get(product, 'discovererId') === comment.user.id && !isCreator
  const [reply, setReply] = useState('')
  const [isReply, setIsReply] = useToggle(false)
  const handleClick = () => setIsReply(!isReply)
  const handleReply = async () => {
    try {
      await onReply(comment.id, reply)
      setReply('')
      setIsReply(false)
    } catch (err) {
      message.error(err.message)
    }
  }
  const renderReplyBox = comment => {
    if (!isReply) return null
    return (

export default () => {
  const [canInstall, setCanInstall] = useToggle(false)
  const [isPushSupported, setIsPushSupported] = useToggle(false)
  const [permission, setPermission] = useState('loading')

  useEffect(() => {
    const OneSignal = window.OneSignal
    OneSignal.push(async () => {
      const _isPushSupported = OneSignal.isPushNotificationsSupported()
      setIsPushSupported(_isPushSupported)
      if (!_isPushSupported) return
      const _permission = await OneSignal.getNotificationPermission()
      setPermission(_permission)
    })
  }, [])

  useEffect(() => {
    const OneSignal = window.OneSignal
    OneSignal.push(() => OneSignal.on('notificationPermissionChange', changed => setPermission(changed.to)))

function FilterPanel({ supportedTxs, onApplyFilter, selectedTxs, theme }) {
  const [open, toggle] = useToggle(false);
  const onToggle = () => toggle();

  return (

export default (productId, {
  onCompleted = noop,
  onError = noop,
  ...rest
} = {}) => {
  const ref = useRef()
  const [visible, setVisible] = useToggle(false)
  const [create, { loading }] = useMutation(CREATE_MILESTONE, {
    ...rest,
    onCompleted: data => {
      const { form } = ref.current.props
      form.resetFields()
      hide()
      onCompleted(data)
    },
    onError: error => {
      const { form } = ref.current.props
      formError(form, error, 'content')
      onError(error)
    }
  })
  const show = () => setVisible(true)
  const hide = () => {

export default ({
  content,
  background = 'linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))',
  height = 160,
  full = false,
  ...rest
}) => {
  const [more, setMore] = useToggle(true)
  const [checked, setChecked] = useToggle(false)
  const ref = useRef()
  useEffect(() => {
    if (!ref.current) return
    if (!full && !checked) {
      setMore(ref.current.offsetHeight < height)
      setChecked(true)
    }
  })
  if (!content) {
    return (
      <div style="{{">
    )
  }
  const renderMore = () =&gt; {
    if (more) return null
    return (</div>

export default (productId, {
  onCompleted = noop,
  onError = noop,
  ...rest
} = {}) => {
  const ref = useRef()
  const [visible, setVisible] = useToggle(false)
  const [create, { loading }] = useMutation(CREATE_MILESTONE, {
    ...rest,
    onCompleted: data => {
      const { form } = ref.current.props
      form.resetFields()
      hide()
      onCompleted(data)
    },
    onError: error => {
      const { form } = ref.current.props
      formError(form, error, 'content')
      onError(error)
    }
  })
  const show = () => setVisible(true)
  const hide = () => {

export default function TxDetail({ tx, children, ...rest }) {
  const [expanded, toggleExpanded] = useToggle(false);
  return (
    
      {children}
      
      <div>
        <button> toggleExpanded()}
          className="btn-expand"
          variant="outlined"
          size="small"
          color="primary"&gt;
          Raw Transaction 
        </button>
        
          <pre style="{{">            <code>{JSON.stringify(tx, true, '  ')}</code></pre></div>

export default ({
  content,
  background = 'linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))',
  height = 160,
  full = false,
  ...rest
}) => {
  const [more, setMore] = useToggle(true)
  const [checked, setChecked] = useToggle(false)
  const ref = useRef()
  useEffect(() => {
    if (!ref.current) return
    if (!full && !checked) {
      setMore(ref.current.offsetHeight < height)
      setChecked(true)
    }
  })
  if (!content) {
    return (
      <div style="{{">
    )
  }
  const renderMore = () =&gt; {
    if (more) return null</div>

export default function PaymentPage() {
  const state = useAsync(fetchStatus);
  const [open, toggle] = useToggle(false);

  if (state.loading) {
    return (
      
        <main>
          
        </main>
      
    );
  }

  if (state.error) {
    return (
      
        <main>{state.error.message}</main>