How to use the react-use.useKey function in react-use

React.useEffect(() => {
    // Make sure our index stays in bounds with max templateInfos

    const totalCount = getTotalTemplateCount();

    if (focusedTemplateIndex >= totalCount || focusedTemplateIndex < 0) {
      safeSetFocusedTemplate(i => i);
    }

    // We only want this check to happen if templateInfos changes. Only then we
    // can get our index out of bounds
    // eslint-disable-next-line
  }, [templateInfos]);

  useKey(
    'ArrowRight',
    evt => {
      evt.preventDefault();
      safeSetFocusedTemplate(i => i + 1);
    },
    {},
    [safeSetFocusedTemplate]
  );

  useKey(
    'ArrowLeft',
    evt => {
      evt.preventDefault();
      safeSetFocusedTemplate(i => i - 1);
    },
    {},

// We only want this check to happen if templateInfos changes. Only then we
    // can get our index out of bounds
    // eslint-disable-next-line
  }, [templateInfos]);

  useKey(
    'ArrowRight',
    evt => {
      evt.preventDefault();
      safeSetFocusedTemplate(i => i + 1);
    },
    {},
    [safeSetFocusedTemplate]
  );

  useKey(
    'ArrowLeft',
    evt => {
      evt.preventDefault();
      safeSetFocusedTemplate(i => i - 1);
    },
    {},
    [safeSetFocusedTemplate]
  );

  useKey(
    'ArrowDown',
    evt => {
      evt.preventDefault();
      const { templateInfo, offset } = getTemplateInfoByIndex(
        focusedTemplateIndex
      );

const shouldCancel = evt && evt.target && evt.target === filterBarRef.current;
		if (shouldCancel) {
			return;
		}
		if (ref && ref.current && typeof ref.current.focus === 'function') {
			if (evt) {
				evt.preventDefault();
			}
			ref.current.focus();
		}
	};

	useKey('h', (evt) => focusRef(evt, keyboardExplainerRef));
	useKey('f', (evt) => focusRef(evt, filterBarRef));
	useKey('p', (evt) => focusRef(evt, pubsPaneRef));
	useKey('s', (evt) => focusRef(evt, selectionsPaneRef));

	const availablePubs = pubs.filter(
		(pub) =>
			fuzzyMatchPub(pub, searchQuery) &&
			!selections.some((selection) => selection.pub === pub),
	);

	const renderKeyboardExplainer = () => {
		return (
			 setIsKeyboardHelpSticky(true)}
			>

return num > 0 && num < 10 && modifierCheck;
    },
    e => {
      const num = getNumber(e);

      const template = getTemplateByIndex(num - 1);
      openSandbox(template.sandbox);
    },
    {},
    [focusedTemplateIndex, getTemplateByIndex, openSandbox]
  );

  /**
   * We have this one to listen to any opening when focus is on an input
   */
  useKey(
    'Enter',
    e => {
      if (
        !e.defaultPrevented &&
        document.activeElement &&
        document.activeElement.tagName === 'INPUT'
      ) {
        e.preventDefault();
        const currentTemplate = getTemplateByIndex(focusedTemplateIndex);
        openSandbox(currentTemplate.sandbox, isMac ? e.metaKey : e.ctrlKey);
      }
    },
    {},
    [focusedTemplateIndex, getTemplateByIndex, openSandbox]
  );

export const SearchBox = ({
  value,
  onChange,
  placeholder = 'Search',
}: SearchProps) => {
  const inputEl = React.useRef();

  useKey('/', () => {
    if (inputEl.current) {
      requestAnimationFrame(() => {
        inputEl.current.focus();
      });
    }
  });

  const handleEsc = (evt: React.KeyboardEvent) => {
    if (evt.keyCode === ESC && inputEl.current) {
      evt.stopPropagation();
      inputEl.current.blur();
    }
  };

  return (

},
    {},
    [safeSetFocusedTemplate]
  );

  useKey(
    'ArrowLeft',
    evt => {
      evt.preventDefault();
      safeSetFocusedTemplate(i => i - 1);
    },
    {},
    [safeSetFocusedTemplate]
  );

  useKey(
    'ArrowDown',
    evt => {
      evt.preventDefault();
      const { templateInfo, offset } = getTemplateInfoByIndex(
        focusedTemplateIndex
      );
      const indexInTemplateInfo = focusedTemplateIndex - offset;
      const totalRowCount = Math.ceil(
        templateInfo.templates.length / columnCount
      );
      const currentRow = Math.floor(indexInTemplateInfo / columnCount);
      const isLastRow = totalRowCount === currentRow + 1;
      const isSecondToLastRow = totalRowCount === currentRow + 2;
      const nextTemplateInfo =
        templateInfos[templateInfos.indexOf(templateInfo) + 1] || templateInfo;
      const { templateInfo: templateInfoUnder } = getTemplateInfoByIndex(

const focusRef = (evt, ref) => {
		const shouldCancel = evt && evt.target && evt.target === filterBarRef.current;
		if (shouldCancel) {
			return;
		}
		if (ref && ref.current && typeof ref.current.focus === 'function') {
			if (evt) {
				evt.preventDefault();
			}
			ref.current.focus();
		}
	};

	useKey('h', (evt) => focusRef(evt, keyboardExplainerRef));
	useKey('f', (evt) => focusRef(evt, filterBarRef));
	useKey('p', (evt) => focusRef(evt, pubsPaneRef));
	useKey('s', (evt) => focusRef(evt, selectionsPaneRef));

	const availablePubs = pubs.filter(
		(pub) =>
			fuzzyMatchPub(pub, searchQuery) &&
			!selections.some((selection) => selection.pub === pub),
	);

	const renderKeyboardExplainer = () => {
		return (
			 setIsKeyboardHelpSticky(true)}

const focusRef = (evt, ref) => {
		const shouldCancel = evt && evt.target && evt.target === filterBarRef.current;
		if (shouldCancel) {
			return;
		}
		if (ref && ref.current && typeof ref.current.focus === 'function') {
			if (evt) {
				evt.preventDefault();
			}
			ref.current.focus();
		}
	};

	useKey('h', (evt) => focusRef(evt, keyboardExplainerRef));
	useKey('f', (evt) => focusRef(evt, filterBarRef));
	useKey('p', (evt) => focusRef(evt, pubsPaneRef));
	useKey('s', (evt) => focusRef(evt, selectionsPaneRef));

	const availablePubs = pubs.filter(
		(pub) =>
			fuzzyMatchPub(pub, searchQuery) &&
			!selections.some((selection) => selection.pub === pub),
	);

	const renderKeyboardExplainer = () => {
		return (

export const BoxOverlay = ({
  component = 'div',
  className,
  children,
  ...props
}) => {
  const history = useHistory();
  const BoxOverlayComponent = component;
  const close = () => history.push('/');
  useKey('Escape', close);

  return (
    
      
      {children}
    
  );
};

const selectionsPaneRef = useRef();

	const focusRef = (evt, ref) => {
		const shouldCancel = evt && evt.target && evt.target === filterBarRef.current;
		if (shouldCancel) {
			return;
		}
		if (ref && ref.current && typeof ref.current.focus === 'function') {
			if (evt) {
				evt.preventDefault();
			}
			ref.current.focus();
		}
	};

	useKey('h', (evt) => focusRef(evt, keyboardExplainerRef));
	useKey('f', (evt) => focusRef(evt, filterBarRef));
	useKey('p', (evt) => focusRef(evt, pubsPaneRef));
	useKey('s', (evt) => focusRef(evt, selectionsPaneRef));

	const availablePubs = pubs.filter(
		(pub) =>
			fuzzyMatchPub(pub, searchQuery) &&
			!selections.some((selection) => selection.pub === pub),
	);

	const renderKeyboardExplainer = () => {
		return (