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

}
  };

  const inputValue =
    autocomplete && (state === NAVIGATING || state === INTERACTING)
      ? // When idle, we don't have a navigationValue on ArrowUp/Down
        navigationValue || controlledValue || value
      : controlledValue || value;

  return (
    
  );
});

const inputValue =
    autocomplete && (state === NAVIGATING || state === INTERACTING)
      ? // When idle, we don't have a navigationValue on ArrowUp/Down
        navigationValue || controlledValue || value
      : controlledValue || value;

  return (
    
  );
});

const Container = portal ? Popover : "div";

  const popupProps = portal
    ? {
        targetRef: inputRef,
        position: positionMatchWidth
      }
    : null;

  return (
    
  );
});

optionsRef.current.push({ value, valueText });
  });

  return (
    
      <span data-reach-listbox-option-text="">
        {typeof children === "function"
          ? children({ value, valueText })
          : children || valueText}
      </span>
    
  );
});

disabled
  });

  return (
    <div aria-labelledby="{ariaLabelledBy}" aria-valuemax="{sliderMax}" aria-valuenow="{value}" aria-orientation="{orientation}" aria-valuetext="{valueText}" aria-valuemin="{sliderMin}" aria-disabled="{disabled}" tabindex="{disabled" role="slider"> {
        setHasFocus(false);
      })}
      onFocus={wrapEvent(onFocus, () =&gt; {
        setHasFocus(true);
      })}
      onKeyDown={wrapEvent(onKeyDown, onHandleKeyDown)}
      style={{
        position: "absolute",
        ...(isVertical ? { bottom: handlePosition } : { left: handlePosition }),
        ...style
      }}
      {...dataAttributes}
      {...props}
    /&gt;
  );
});</div>

};

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

  return [trigger, tooltip, isVisible];
}

return (
    <div aria-labelledby="{ariaLabelledBy}" aria-valuemax="{sliderMax}" aria-valuenow="{value}" aria-orientation="{orientation}" aria-valuetext="{valueText}" aria-valuemin="{sliderMin}" aria-disabled="{disabled}" tabindex="{disabled" role="slider"> {
        setHasFocus(false);
      })}
      onFocus={wrapEvent(onFocus, () =&gt; {
        setHasFocus(true);
      })}
      onKeyDown={wrapEvent(onKeyDown, onHandleKeyDown)}
      style={{
        position: "absolute",
        ...(isVertical ? { bottom: handlePosition } : { left: handlePosition }),
        ...style
      }}
      {...dataAttributes}
      {...props}
    /&gt;
  );
});
</div>

function ExampleTokenbox({ onSelect, ...props }) {
  const handleSelect = () => {};
  return ;
}

const popupProps = portal
    ? {
        targetRef: buttonRef,
        position: positionMatchWidth
      }
    : {};

  return (
    
  );
});