How to use the @reach/utils.makeId function in @reach/utils

};

  const handleMouseDown = () => {
    // Allow quick click from one tool to another
    if (context.id !== id) return;
    transition("mousedown");
  };

  const handleKeyDown = event => {
    if (event.key === "Enter" || event.key === " ") {
      transition("selectWithKeyboard");
    }
  };

  const trigger = {
    "aria-describedby": isVisible ? makeId("tooltip", id) : undefined,
    "data-reach-tooltip-trigger": "",
    ref,
    onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
    onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
    onFocus: wrapEvent(onFocus, handleFocus),
    onBlur: wrapEvent(onBlur, handleBlur),
    onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
    onMouseDown: wrapEvent(onMouseDown, handleMouseDown)
  };

  const tooltip = {
    id,
    triggerRect,
    isVisible
  };

*/
    navigationSelection: null
  };

  const [
    state,
    data,
    transition,
    { buttonRef, inputRef, listRef, mouseMovedRef, optionsRef, popoverRef }
  ] = useReducerMachine(stateChart, reducer, initialData);

  const id = useId(props.id);

  const listboxId = makeId("listbox", id);

  const buttonId = makeId("button", id);

  const ref = useForkedRef(inputRef, forwardedRef);

  // Parses our children to find the selected option.
  // See docblock on the function for more deets.
  const selectedNode = recursivelyFindChildByValue(children, value);

  const context = {
    buttonId,
    buttonRef,
    data,
    inputRef,
    instanceId: id,
    isExpanded: isExpanded(state),
    listboxId,
    listRef,

export const AccordionItem = forwardRef(function AccordionItem(
  { children, disabled = false, index: indexProp, ...props },
  forwardedRef
) {
  const { accordionId, activeIndex, readOnly } = useAccordionContext();

  const ownRef = useRef(null);
  const [index, setRef] = useDescendant(ownRef, indexProp, disabled);
  const ref = useForkedRef(setRef, forwardedRef);

  // We need unique IDs for the panel and trigger to point to one another
  const itemId = makeId(accordionId, index);
  const panelId = makeId("panel", itemId);
  const triggerId = makeId("trigger", itemId);

  const active = Array.isArray(activeIndex)
    ? activeIndex.includes(index)
    : activeIndex === index;

  const context = {
    active,
    disabled,
    triggerId,
    index,
    itemId,
    panelId
  };

  return (

// hook spread props
    isVisible,
    id,
    triggerRect,
    ...rest
  },
  forwardRef
) {
  return isVisible ? (
    
      
    
  ) : null;
});

function useOptionId(value) {
  const { instanceId } = useListboxContext();
  return makeId(`option-${value}`, instanceId);
}

export const TabPanel = forwardRef(function TabPanel(
  { children, as: Comp = "div", ...rest },
  forwardedRef
) {
  const { isSelected, _selectedPanelRef, _id, ...htmlProps } = rest;
  const ref = useForkedRef(forwardedRef, isSelected ? _selectedPanelRef : null);

  return (
    
  );
});

useEffect(() => {
    let newButtonId = id != null ? id : makeId("menu-button", menuId);
    if (buttonId !== newButtonId) {
      dispatch({
        type: SET_BUTTON_ID,
        payload: newButtonId
      });
    }
  }, [buttonId, dispatch, id, menuId]);

const ownRef = useRef(null);
  const ref = useForkedRef(forwardedRef, ownRef);

  useUpdateEffect(() => {
    if (isSelected && ownRef.current && _userInteractedRef.current) {
      _userInteractedRef.current = false;
      ownRef.current.focus();
    }
  }, [isSelected]);

  return (
    
  );
});

export const ListboxGroup = forwardRef(function ListboxGroup(
  { children, label, ...props },
  forwardedRef
) {
  const { listboxId } = useListboxContext();
  const labelId = makeId(
    "label",
    useId(typeof label === "string" ? kebabCase(label) : null),
    listboxId
  );

  return (
    
      <div role="group" aria-labelledby="{labelId}" data-reach-listbox-group="">
        {typeof label === "string" ? (
          </div>

const clones = React.Children.map(children, (child, index) => {
    if (elementIsNullOrString(child)) return child;
    return cloneElement(child, {
      isSelected: index === selectedIndex,
      _selectedPanelRef,
      _id: makeId(_id, index)
    });
  });