How to use the @chakra-ui/utils.composeEventHandlers function in @chakra-ui/utils

};
    }, [dispatch, id, isDisabled, isFocusable, ref, value]);

    return (
      <div tabindex="{-1}" aria-disabled="{isDisabled" aria-selected="{isHighlighted" data-chakra-select-option="" role="option"> {
          // console.log("welcome");
          dispatch({ type: "FOCUS", payload: { id } });
        })}
        onMouseLeave={composeEventHandlers(onMouseLeave, () =&gt; {
          dispatch({ type: "RESET_FOCUSED", payload: {} });
        })}
        onClick={composeEventHandlers(onClick, () =&gt; {
          dispatch({ type: "MOUSE_SELECT", payload: { id } });
          actions.closeMenu();
        })}
        onKeyDown={composeEventHandlers(onKeyDown, event =&gt; {
          if (event.key === "Tab" &amp;&amp; props.selectOptionOnTab) {
            dispatch({ type: "SELECT_FOCUSED", payload: {} });
          }
        })}
        style={{
          ...(isHighlighted &amp;&amp; { background: "blue", color: "white" }),
          ...(isSelected &amp;&amp; { background: "tomato", color: "white" }),
        }}
        {...rest}</div>

onFocus,
    panelId,
    buttonId,
    isDisabled,
    isFocusable,
    isOpen,
  } = useAccordionItemContext();

  // With useTabbable, we don't have to worry about managing when the button is disabled
  // or trigger a click on Enter or Space bar
  const tabbable = useTabbable({
    ...props,
    isDisabled,
    isFocusable,
    onClick: composeEventHandlers(props.onClick, onClick),
    onKeyDown: composeEventHandlers(props.onKeyDown, onKeyDown),
  });

  const ref = useMergeRefs(buttonRef, props.ref);

  return {
    ...tabbable,
    ref,
    "aria-expanded": isOpen,
    "aria-controls": panelId,
    id: buttonId,
    onFocus: composeEventHandlers(props.onFocus, onFocus),
  };
}

onKeyDown,
    onFocus,
    panelId,
    buttonId,
    isDisabled,
    isFocusable,
    isOpen,
  } = useAccordionItemContext();

  // With useTabbable, we don't have to worry about managing when the button is disabled
  // or trigger a click on Enter or Space bar
  const tabbable = useTabbable({
    ...props,
    isDisabled,
    isFocusable,
    onClick: composeEventHandlers(props.onClick, onClick),
    onKeyDown: composeEventHandlers(props.onKeyDown, onKeyDown),
  });

  const ref = useMergeRefs(buttonRef, props.ref);

  return {
    ...tabbable,
    ref,
    "aria-expanded": isOpen,
    "aria-controls": panelId,
    id: buttonId,
    onFocus: composeEventHandlers(props.onFocus, onFocus),
  };
}

} = useEditableContext();

  const onBlur = React.useCallback(() => {
    if (submitOnBlur) onSubmit();
  }, [submitOnBlur, onSubmit]);

  return {
    hidden: !isEditing,
    placeholder,
    ref: inputRef,
    disabled: isDisabled,
    "aria-disabled": isDisabled,
    onBlur: composeEventHandlers(props.onBlur, onBlur),
    value,
    onChange: composeEventHandlers(props.onChange, onChange),
    onKeyDown: composeEventHandlers(props.onKeyDown, onKeyDown),
  };
}

placeholder,
    submitOnBlur,
    isDisabled,
  } = useEditableContext();

  const onBlur = React.useCallback(() => {
    if (submitOnBlur) onSubmit();
  }, [submitOnBlur, onSubmit]);

  return {
    hidden: !isEditing,
    placeholder,
    ref: inputRef,
    disabled: isDisabled,
    "aria-disabled": isDisabled,
    onBlur: composeEventHandlers(props.onBlur, onBlur),
    value,
    onChange: composeEventHandlers(props.onChange, onChange),
    onKeyDown: composeEventHandlers(props.onKeyDown, onKeyDown),
  };
}

},
    checkbox: {
      "data-checked": isChecked ? "" : undefined,
      "data-focus": isFocused ? "" : undefined,
      "data-mixed": isIndeterminate ? "" : undefined,
      "data-disabled": isDisabled ? "" : undefined,
      "data-readonly": isReadOnly ? "" : undefined,
    },
    input: {
      ref,
      type: "checkbox",
      name,
      value,
      id,
      onChange: handleChange,
      onBlur: composeEventHandlers(onBlur, handleBlur),
      onFocus: composeEventHandlers(onFocus, handleFocus),
      checked: isChecked,
      disabled: trulyDisabled,
      readOnly: isReadOnly,
      "aria-invalid": isInvalid,
      "aria-disabled": isDisabled,
    },
  };
}

export function usePopoverTrigger(props: any = {}) {
  const popover = usePopoverCtx();
  const _ref = useMergeRefs(popover.trigger.ref, popover.reference.ref);

  const ariaHasPopup: React.AriaAttributes["aria-haspopup"] = "dialog";

  return {
    ref: _ref,
    "aria-haspopup": ariaHasPopup,
    "aria-expanded": popover.isOpen,
    "aria-controls": popover.trigger.id,
    onClick: composeEventHandlers(props.onClick, popover.onToggle),
  };
}

},
    checkbox: {
      "data-checked": isChecked === true ? "" : undefined,
      "data-focus": isFocused ? "" : undefined,
      "data-mixed": isMixed ? "" : undefined,
      "data-disabled": props.isDisabled ? "" : undefined,
      "data-readonly": props.isReadOnly ? "" : undefined,
    },
    hiddenCheckbox: {
      ref,
      type: "checkbox",
      name: props.name,
      value: props.value,
      id: props.id,
      onChange,
      onBlur: composeEventHandlers(props.onBlur, onBlur),
      onFocus: composeEventHandlers(props.onFocus, onFocus),
      checked: isChecked === "mixed" || isChecked === true ? true : false,
      disabled: trulyDisabled,
      readOnly: props.isReadOnly,
      "aria-invalid": props.isInvalid,
      "aria-disabled": props.isDisabled,
      "aria-checked": isChecked,
    },
  };
}

visible: menu.isOpen,
  });

  const ref = useMergeRefs(menu.menuRef, menu.popper.ref);

  return {
    ...props,
    ref,
    role: "menu",
    id: menu.menuId,
    hidden: !menu.isOpen,
    "aria-labelledby": menu.buttonId,
    "data-placement": menu.popper.placement,
    style: menu.popper.style,
    tabIndex: -1,
    onKeyDown: composeEventHandlers(props.onKeyDown, onKeyDown),
    onBlur: menu.closeOnBlur
      ? composeEventHandlers(props.onBlur, onBlur)
      : props.onBlur,
  };
}

const onKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === "Escape") popover.onClose();
  };

  return {
    ref: _ref,
    "aria-hidden": !popover.isOpen,
    hidden: !popover.isOpen,
    tabIndex: -1,
    id: popover.content.id,
    role: "dialog",
    "data-placement": popover.popper.placement,
    style: popover.popper.style,
    onBlur: composeEventHandlers(props.onBlur, onBlur),
    onKeyDown: composeEventHandlers(props.onKeyDown, onKeyDown),
    "aria-labelledby": popover.headerId,
    "aria-describedby": popover.bodyId,
  };
}