How to use the @react-md/utils.useEventListener function in @react-md/utils

}
  }

  function enableKeyboardMode() {
    if (!isKeyboardMode) {
      setKeyboardMode(true);
    }
  }

  useEventListener("mousedown", reset, {
    shouldUpdate: [focusedId === null, isKeyboardMode],
  });
  useEventListener("keydown", enableKeyboardMode, {
    shouldUpdate: [isKeyboardMode],
  });
  useEventListener(
    "focus",
    (event: FocusEvent) => {
      const target = event.target as Maybe;
      if (isKeyboardMode && target && target.id !== focusedId) {
        setFocusedId(target.id);
      }
    },
    {
      enabled: isKeyboardMode,
      capture: true,
      shouldUpdate: [isKeyboardMode, focusedId],
    }
  );

  useEventListener(
    "keyup",

if (isKeyboardMode) {
      setKeyboardMode(false);
    }

    if (focusedId !== null) {
      setFocusedId(null);
    }
  }

  function enableKeyboardMode() {
    if (!isKeyboardMode) {
      setKeyboardMode(true);
    }
  }

  useEventListener("mousedown", reset, {
    shouldUpdate: [focusedId === null, isKeyboardMode],
  });
  useEventListener("keydown", enableKeyboardMode, {
    shouldUpdate: [isKeyboardMode],
  });
  useEventListener(
    "focus",
    (event: FocusEvent) => {
      const target = event.target as Maybe;
      if (isKeyboardMode && target && target.id !== focusedId) {
        setFocusedId(target.id);
      }
    },
    {
      enabled: isKeyboardMode,
      capture: true,

}
      }
    }

    if (nextIndex !== -1) {
      event.preventDefault();
      const el = focusableElements[nextIndex];
      if (onFocus) {
        onFocus(el, nextIndex, focusableElements);
      } else {
        focusableElements[nextIndex].focus();
      }
    }
  }

  useEventListener("keydown", handleKeyDown, {
    capture: true,
    enabled: !disabled,
    shouldUpdate: [container, focusableElements],
  });
}

useEventListener(
    "focus",
    (event: FocusEvent) => {
      const target = event.target as Maybe;
      if (isKeyboardMode && target && target.id !== focusedId) {
        setFocusedId(target.id);
      }
    },
    {
      enabled: isKeyboardMode,
      capture: true,
      shouldUpdate: [isKeyboardMode, focusedId],
    }
  );

  useEventListener(
    "keyup",
    (event: KeyboardEvent) => {
      const target = event.target as Maybe;
      if (
        !target ||
        (target as HTMLElement | Window) === window ||
        event.key !== "Tab"
      ) {
        return;
      } else if (!target.id) {
        if (
          target.tagName !== "A" &&
          !disableUntrackableWarning &&
          process.env.NODE_ENV !== "production" &&
          !DEBUG_SET.has(target)
        ) {

if (focusedId !== null) {
      setFocusedId(null);
    }
  }

  function enableKeyboardMode() {
    if (!isKeyboardMode) {
      setKeyboardMode(true);
    }
  }

  useEventListener("mousedown", reset, {
    shouldUpdate: [focusedId === null, isKeyboardMode],
  });
  useEventListener("keydown", enableKeyboardMode, {
    shouldUpdate: [isKeyboardMode],
  });
  useEventListener(
    "focus",
    (event: FocusEvent) => {
      const target = event.target as Maybe;
      if (isKeyboardMode && target && target.id !== focusedId) {
        setFocusedId(target.id);
      }
    },
    {
      enabled: isKeyboardMode,
      capture: true,
      shouldUpdate: [isKeyboardMode, focusedId],
    }
  );