How to use the docz.usePrevious function in docz

export const Sidebar: SFC = () => {
  const [hidden, setHidden] = useState(true)
  const [query, setQuery] = useState('')
  const menus = useMenus({ query })
  const windowSize = useWindowSize()
  const isDesktop = windowSize.innerWidth >= breakpoints.desktop
  const prevIsDesktop = usePrevious(isDesktop)

  useEffect(() => {
    if (!hidden && !prevIsDesktop && isDesktop) {
      setHidden(true)
      document.documentElement!.classList.remove('with-overlay')
    }
  })

  const addOverlayClass = (isHidden: boolean) => {
    const method = !isHidden ? 'add' : 'remove'

    if (typeof window !== 'undefined' && !isDesktop) {
      document.documentElement!.classList[method]('with-overlay')
    }
  }

({ item, children, onClick, onActiveChange }, ref) => {
    const { linkComponent } = useConfig()
    const [active, setActive] = useState(false)
    const prevActive = usePrevious(active)
    const $el = useRef(ref)
    const Link = useMemo(() => createLink(linkComponent!), [linkComponent])

    const linkProps = {
      children,
      onClick,
    }

    useEffect(() => {
      const isActive = getActiveFromClass($el.current, item.route)
      if (prevActive !== isActive) {
        setActive(isActive)
        $el && checkActiveClass($el.current, isActive)
        onActiveChange && onActiveChange(isActive)
      }
    })