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

);
            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
    };
  }
});

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
    };
  }
});

rover.currentId,
      rover.unstable_pastId
    ]);

    const wrap = React.useCallback(
      (children: React.ReactNode) => (
        
          {children}
        
      ),
      [providerValue]
    );

    return {
      role: "radiogroup",
      unstable_wrap: usePipe(wrap, htmlWrap),
      ...htmlProps
    };
  }
}) as >(

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
    };
  }
});