How to use the @restart/hooks/useCallbackRef function in @restart/hooks

drop,
  alignEnd,
  defaultShow,
  show: rawShow,
  onToggle: rawOnToggle,
  itemSelector,
  focusFirstItemOnShow,
  children,
}) {
  const forceUpdate = useForceUpdate();
  const { show, onToggle } = useUncontrolled(
    { defaultShow, show: rawShow, onToggle: rawOnToggle },
    { show: 'onToggle' },
  );

  const [toggleElement, setToggle] = useCallbackRef();

  // We use normal refs instead of useCallbackRef in order to populate the
  // the value as quickly as possible, otherwise the effect to focus the element
  // may run before the state value is set
  const menuRef = useRef();
  const menuElement = menuRef.current;

  const setMenu = useCallback(
    ref => {
      menuRef.current = ref;
      // ensure that a menu set triggers an update for consumers
      forceUpdate();
    },
    [forceUpdate],
  );

export function useDropdownMenu(options = {}) {
  const context = useContext(DropdownContext);

  const [arrowElement, attachArrowRef] = useCallbackRef();

  const hasShownRef = useRef(false);

  const {
    flip,
    rootCloseEvent,
    popperConfig = {},
    usePopper: shouldUsePopper = true,
  } = options;

  const show = context.show == null ? options.show : context.show;
  const alignEnd =
    context.alignEnd == null ? options.alignEnd : context.alignEnd;

  if (show && !hasShownRef.current) {
    hasShownRef.current = true;