What's the most idiomatic way of forwarding an onClick event handler?

<button onClick={props.onClick}>...</button>

export function Option(
  props: ParentProps<{
    onClick: JSX.HTMLElementTags["button"]["onClick"];
  }>,
) {
  const clickHandler: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (
    e,
  ) => {
    if (!props.onClick) return;

    if (typeof props.onClick === "function") return props.onClick(e);

    props.onClick[0](props.onClick[1], e);
  };
  return (
    <button
      type="button"
      onClick={clickHandler}
    >
      {props.children}
    </button>
  );
}