How to use the reakit-utils/mergeRefs.mergeRefs function in reakit-utils

useProps(options, { ref: htmlRef, style: htmlStyle, ...htmlProps }) {
    const [placement] = options.placement.split("-");
    const transformMap = {
      top: "rotateZ(180deg)",
      right: "rotateZ(-90deg)",
      bottom: "rotateZ(360deg)",
      left: "rotateZ(90deg)"
    };
    const { unstable_arrowStyles: arrowStyles } = options;
    return {
      ref: mergeRefs(options.unstable_arrowRef, htmlRef),
      style: {
        ...arrowStyles,
        top: arrowStyles ? arrowStyles.top || undefined : undefined,
        position: "absolute",
        fontSize: options.size,
        width: "1em",
        height: "1em",
        pointerEvents: "none",
        transform: transformMap[placement as keyof typeof transformMap],
        [placement]: "100%",
        ...htmlStyle
      },
      children: (
        <svg viewBox="0 0 30 30">
          </svg>

useProps(options, { ref: htmlRef, style: htmlStyle, ...htmlProps }) {
    return {
      ref: mergeRefs(options.unstable_popoverRef, htmlRef),
      style: { ...options.unstable_popoverStyles, ...htmlStyle },
      ...htmlProps
    };
  }
});

useProps(
    options,
    { ref: htmlRef, unstable_wrap: htmlWrap, role = "menubar", ...htmlProps }
  ) {
    const ref = React.useRef(null);
    const wrap = useMenuContext(ref, role, options);

    useShortcuts(ref, options);

    return {
      ref: mergeRefs(ref, htmlRef),
      role,
      "aria-orientation": options.orientation,
      unstable_wrap: usePipe(wrap, htmlWrap),
      ...htmlProps
    };
  }
});

React.useEffect(() => {
      const self = ref.current;

      if (!self) return;

      if (!isButton(self)) {
        if (self.tagName !== "A") {
          setRole("button");
        }
        setType(undefined);
      }
    }, []);

    return {
      ref: mergeRefs(ref, htmlRef),
      role,
      type,
      ...htmlProps
    };
  }
});

options.state,
        options.value
      ]
    );

    const onClick = React.useCallback(
      (event: React.MouseEvent) => {
        const self = event.currentTarget as HTMLElement;
        if (self.tagName === "INPUT") return;
        onChange(event);
      },
      [onChange]
    );

    return {
      ref: mergeRefs(ref, htmlRef),
      checked,
      "aria-checked": options.state === "indeterminate" ? "mixed" : checked,
      value: options.value,
      role: "checkbox",
      type: "checkbox",
      onChange,
      onClick: useAllCallbacks(onClick, htmlOnClick),
      ...htmlProps
    };
  }
});

PageUp: options.first,
            PageDown: options.last
          }
        }),
      [
        htmlOnKeyDown,
        options.orientation,
        options.previous,
        options.next,
        options.first,
        options.last
      ]
    );

    return {
      ref: mergeRefs(ref, htmlRef),
      id: stopId,
      tabIndex: shouldTabIndex ? htmlTabIndex : -1,
      onFocus: useAllCallbacks(onFocus, htmlOnFocus),
      onKeyDown,
      ...htmlProps
    };
  }
});

true,
              "[reakit/Dialog]",
              "`hideOnEsc` prop is truthy, but `hide` prop wasn't provided.",
              "See https://reakit.io/docs/dialog"
            );
            return;
          }
          event.stopPropagation();
          options.hide();
        }
      },
      [options.hideOnEsc, options.hide]
    );

    return {
      ref: mergeRefs(dialog, htmlRef),
      role: "dialog",
      tabIndex: -1,
      onKeyDown: useAllCallbacks(onKeyDown, htmlOnKeyDown),
      unstable_wrap: usePipe(wrap, portalWrap, htmlWrap),
      "aria-modal": options.modal ? true : undefined,
      "data-dialog": true,
      ...htmlProps
    };
  }
});

useProps(
    options,
    {
      ref: htmlRef,
      onFocus: htmlOnFocus,
      onBlur: htmlOnBlur,
      onMouseEnter: htmlOnMouseEnter,
      onMouseLeave: htmlOnMouseLeave,
      ...htmlProps
    }
  ) {
    return {
      ref: mergeRefs(options.unstable_referenceRef, htmlRef),
      tabIndex: 0,
      onFocus: useAllCallbacks(options.show, htmlOnFocus),
      onBlur: useAllCallbacks(options.hide, htmlOnBlur),
      onMouseEnter: useAllCallbacks(options.show, htmlOnMouseEnter),
      onMouseLeave: useAllCallbacks(options.hide, htmlOnMouseLeave),
      "aria-describedby": options.baseId,
      ...htmlProps
    };
  }
});

useProps(
    options,
    { ref: htmlRef, style: htmlStyle, unstable_wrap: htmlWrap, ...htmlProps }
  ) {
    const wrap = React.useCallback(
      (children: React.ReactNode) => {children},
      []
    );
    return {
      ref: mergeRefs(options.unstable_popoverRef, htmlRef),
      role: "tooltip",
      style: {
        ...options.unstable_popoverStyles,
        pointerEvents: "none",
        ...htmlStyle
      },
      unstable_wrap: usePipe(wrap, htmlWrap),
      ...htmlProps
    };
  }
});

useProps(options, { ref: htmlRef, ...htmlProps }) {
    return {
      ref: mergeRefs(options.unstable_referenceRef, htmlRef),
      ...htmlProps
    };
  }
});