React Hook to monitor if user is tabbing

useIsTabbing.js

import { useState, useEffect } from "react";

/* Track whether user is interacting via keyboard.
   This is used to determine if we should show focus rings.
   Focus rings should only display on focus when isTabbing is true.
*/
export default function useIsTabbing() {
  const [isTabbing, setIsTabbing] = useState(false);

  useEffect(function listenForMouseClicksAndKeydowns() {
    // When a click occurs, set isTabbing false.
    function handleClick() {
      setIsTabbing(false);
    }

    // When a tab occurs, set isTabbing true.
    function handleKeydown(e) {
      const isTabEvent = e.keyCode === 9;
      if (isTabEvent) setIsTabbing(true);
    }
     
    window.addEventListener("keydown", handleKeydown);
    window.addEventListener("click", handleClick);
    return () => {
      window.removeEventListener("keydown", handleKeydown);
      window.removeEventListener("click", handleClick);
    };
  }, []);

  return isTabbing;
}