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

overlayBgColorStart,
  parentRef,
  portalEl,
  scrollableEl,
  transitionDuration,
  zoomMargin,
  zoomZindex
}) => {
  const btnRef = useRef(null)
  const [, forceUpdate] = useState(0)
  const [isActive, setIsActive] = useState(isActiveFromParent)
  const [isLoaded, setIsLoaded] = useState(false)
  const [isUnloading, setIsUnloading] = useState(false)
  const prevIsActive = usePrevious(isActive)
  const prevIsActiveFromParent = usePrevious(isActiveFromParent)
  const prevIsLoaded = usePrevious(isLoaded)
  const { width: innerWidth, height: innerHeight } = useWindowSize()

  // on click, tell caller it should zoom
  const handleClick = useCallback(
    e => {
      e.preventDefault()
      onZoomChange(false)
    },
    [onZoomChange]
  )

  // on escape, tell caller it should unzoom
  const handleKeyDown = useCallback(
    e => {
      if (e.key === 'Escape' || e.keyCode === 27) {
        e.stopPropagation()

({ value, onChange, suggestions, placeholder = 'http://your-grafana.com/d/000000010/annotations' }) => {
    const editorRef = useRef() as RefObject;
    const theme = useContext(ThemeContext);
    const styles = getStyles(theme);
    const [showingSuggestions, setShowingSuggestions] = useState(false);
    const [suggestionsIndex, setSuggestionsIndex] = useState(0);
    const [linkUrl, setLinkUrl] = useState(makeValue(value));
    const prevLinkUrl = usePrevious(linkUrl);

    // Workaround for https://github.com/ianstormtaylor/slate/issues/2927
    const stateRef = useRef({ showingSuggestions, suggestions, suggestionsIndex, linkUrl, onChange });
    stateRef.current = { showingSuggestions, suggestions, suggestionsIndex, linkUrl, onChange };

    // SelectionReference is used to position the variables suggestion relatively to current DOM selection
    const selectionRef = useMemo(() => new SelectionReference(), [setShowingSuggestions, linkUrl]);

    const onKeyDown = React.useCallback((event: KeyboardEvent, next: () => any) => {
      if (!stateRef.current.showingSuggestions) {
        if (event.key === '=' || event.key === '$' || (event.keyCode === 32 && event.ctrlKey)) {
          return setShowingSuggestions(true);
        }
        return next();
      }

overlayBgColorEnd,
  overlayBgColorStart,
  parentRef,
  portalEl,
  scrollableEl,
  transitionDuration,
  zoomMargin,
  zoomZindex
}) => {
  const btnRef = useRef(null)
  const [, forceUpdate] = useState(0)
  const [isActive, setIsActive] = useState(isActiveFromParent)
  const [isLoaded, setIsLoaded] = useState(false)
  const [isUnloading, setIsUnloading] = useState(false)
  const prevIsActive = usePrevious(isActive)
  const prevIsActiveFromParent = usePrevious(isActiveFromParent)
  const prevIsLoaded = usePrevious(isLoaded)
  const { width: innerWidth, height: innerHeight } = useWindowSize()

  // on click, tell caller it should zoom
  const handleClick = useCallback(
    e => {
      e.preventDefault()
      onZoomChange(false)
    },
    [onZoomChange]
  )

  // on escape, tell caller it should unzoom
  const handleKeyDown = useCallback(
    e => {
      if (e.key === 'Escape' || e.keyCode === 27) {

onZoomChange,
  overlayBgColorEnd,
  overlayBgColorStart,
  parentRef,
  portalEl,
  scrollableEl,
  transitionDuration,
  zoomMargin,
  zoomZindex
}) => {
  const btnRef = useRef(null)
  const [, forceUpdate] = useState(0)
  const [isActive, setIsActive] = useState(isActiveFromParent)
  const [isLoaded, setIsLoaded] = useState(false)
  const [isUnloading, setIsUnloading] = useState(false)
  const prevIsActive = usePrevious(isActive)
  const prevIsActiveFromParent = usePrevious(isActiveFromParent)
  const prevIsLoaded = usePrevious(isLoaded)
  const { width: innerWidth, height: innerHeight } = useWindowSize()

  // on click, tell caller it should zoom
  const handleClick = useCallback(
    e => {
      e.preventDefault()
      onZoomChange(false)
    },
    [onZoomChange]
  )

  // on escape, tell caller it should unzoom
  const handleKeyDown = useCallback(
    e => {

export default function SidebarNav(props) {
  const prevPathname = usePrevious(props.pathname)
  const [state, setState] = useState(
    getSidebarState(props.contents, props.pathname)
  )

  const allExpanded = useMemo(
    () => props.contents.every(({ title }) => state[getId(title)]),
    [props.contents, state]
  )

  useEffect(() => {
    if (props.pathname !== prevPathname) {
      const category = props.contents.find(({ pages }) =>
        pages.find(page => isPageSelected(page.path, props.pathname))
      )
      if (category) {
        const id = getId(category.title)

export default function SidebarNav(props) {
  const prevPathname = usePrevious(props.pathname);
  const [state, setState] = useState(
    getSidebarState(props.contents, props.pathname)
  );

  const allExpanded = useMemo(
    () => props.contents.every(({title}) => state[getId(title)]),
    [props.contents, state]
  );

  useEffect(() => {
    if (props.pathname !== prevPathname) {
      const category = props.contents.find(({pages}) =>
        pages.find(page => isPageSelected(page.path, props.pathname))
      );
      if (category) {
        const id = getId(category.title);