How to use the @zendeskgarden/container-utilities.composeEventHandlers function in @zendeskgarden/container-utilities

const getTriggerProps = (
    { tabIndex = 0, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...other } = {} as any
  ) => {
    return {
      tabIndex,
      onMouseEnter: composeEventHandlers(onMouseEnter, () => openTooltip()),
      onMouseLeave: composeEventHandlers(onMouseLeave, () => closeTooltip()),
      onFocus: composeEventHandlers(onFocus, () => openTooltip()),
      // Close menu immediately when blurred
      onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
      onKeyDown: composeEventHandlers(onKeyDown, (event: KeyboardEvent) => {
        if (event.keyCode === KEY_CODES.ESCAPE && visibility) {
          closeTooltip(0);
        }
      }),
      'aria-describedby': _id,
      'data-garden-container-id': 'containers.tooltip',
      'data-garden-container-version': PACKAGE_VERSION,
      ...other
    };
  };

useEffect(() => {
    updateBackgroundWidthFromInput(rangeRef.current);
  }, [rangeRef, updateBackgroundWidthFromInput]);

  return (
     {
            updateBackgroundWidthFromInput(event.target);
          })
        },
        { isDescribed: true }
      )}
    />
  );
});

const getBackdropProps = ({ onClick, ...other } = {} as any) => {
    return {
      onClick: composeEventHandlers(onClick, (event: MouseEvent) => {
        closeModal(event);
      }),
      'data-garden-container-id': 'containers.modal',
      'data-garden-container-version': PACKAGE_VERSION,
      ...other
    };
  };

({ onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }, ref) => {
    const [isHovered, setIsHovered] = useState(false);
    const [isFocused, setIsFocused] = useState(false);

    const onMouseEnterHandler = composeEventHandlers(onMouseEnter, () => {
      setIsHovered(true);
    });

    const onMouseLeaveHandler = composeEventHandlers(onMouseLeave, () => {
      setIsHovered(false);
    });

    const onFocusHandler = composeEventHandlers(onFocus, () => {
      setIsFocused(true);
    });

    const onBlurHandler = composeEventHandlers(onBlur, () => {
      setIsFocused(false);
    });

    return (

getLabelProps: ({ onMouseUp, ...other }) =>
      getLabelProps({ onMouseUp: composeEventHandlers(onMouseUp, onFocusMouseDown), ...other }),
    ...fieldCtx

tabIndex = 0,
      onBlur,
      onFocus,
      onMouseDown,
      onPointerDown,
      onTouchStart,
      ...props
    } = {} as any
  ) => {
    return {
      tabIndex,
      onBlur: composeEventHandlers(onBlur, onKeyboardFocusBlur),
      onFocus: composeEventHandlers(onFocus, onKeyboardFocus),
      onMouseDown: composeEventHandlers(onMouseDown, onKeyboardFocusPointerDown),
      onPointerDown: composeEventHandlers(onPointerDown, onKeyboardFocusPointerDown),
      onTouchStart: composeEventHandlers(onTouchStart, onKeyboardFocusPointerDown),
      'data-garden-container-id': 'containers.keyboardfocus',
      'data-garden-container-version': PACKAGE_VERSION,
      ...props
    };
  };

{
      tabIndex = 0,
      onBlur,
      onFocus,
      onMouseDown,
      onPointerDown,
      onTouchStart,
      ...props
    } = {} as any
  ) => {
    return {
      tabIndex,
      onBlur: composeEventHandlers(onBlur, onKeyboardFocusBlur),
      onFocus: composeEventHandlers(onFocus, onKeyboardFocus),
      onMouseDown: composeEventHandlers(onMouseDown, onKeyboardFocusPointerDown),
      onPointerDown: composeEventHandlers(onPointerDown, onKeyboardFocusPointerDown),
      onTouchStart: composeEventHandlers(onTouchStart, onKeyboardFocusPointerDown),
      'data-garden-container-id': 'containers.keyboardfocus',
      'data-garden-container-version': PACKAGE_VERSION,
      ...props
    };
  };

const getContainerProps = ({ onKeyDown, ...other } = {} as any) => {
    return {
      onKeyDown: composeEventHandlers(onKeyDown, (event: KeyboardEvent) => {
        if (event.keyCode !== KEY_CODES.TAB) {
          return;
        }
        validateContainerRef();

        const tabbableNodes = getTabbableNodes();

        if (
          event.shiftKey &&
          (event.target === tabbableNodes.firstItem || event.target === currentRef)
        ) {
          focusElement(tabbableNodes.lastItem);
          event.preventDefault();
        }

        if (!event.shiftKey && event.target === tabbableNodes.lastItem) {

getLabelProps: ({ onMouseUp, ...other }) =>
      getLabelProps({ onMouseUp: composeEventHandlers(onMouseUp, onFocusMouseDown), ...other }),
    ...fieldCtx

const getFocusProps = (
    {
      tabIndex = 0,
      onBlur,
      onFocus,
      onMouseDown,
      onPointerDown,
      onTouchStart,
      ...props
    } = {} as any
  ) => {
    return {
      tabIndex,
      onBlur: composeEventHandlers(onBlur, onKeyboardFocusBlur),
      onFocus: composeEventHandlers(onFocus, onKeyboardFocus),
      onMouseDown: composeEventHandlers(onMouseDown, onKeyboardFocusPointerDown),
      onPointerDown: composeEventHandlers(onPointerDown, onKeyboardFocusPointerDown),
      onTouchStart: composeEventHandlers(onTouchStart, onKeyboardFocusPointerDown),
      'data-garden-container-id': 'containers.keyboardfocus',
      'data-garden-container-version': PACKAGE_VERSION,
      ...props
    };
  };