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

preventMouseRootCloseRef.current =
        !currentTarget ||
        isModifiedEvent(e) ||
        !isLeftClickEvent(e) ||
        contains(currentTarget, e.target);
    },
    [ref],
  );

  const handleMouse = useEventCallback(e => {
    if (!preventMouseRootCloseRef.current) {
      onClose(e);
    }
  });

  const handleKeyUp = useEventCallback(e => {
    if (e.keyCode === escapeKeyCode) {
      onClose(e);
    }
  });

  useEffect(() => {
    if (disabled || ref == null) return undefined;

    const doc = ownerDocument(ref.current);

    // Use capture for this listener so it fires before React's listener, to
    // avoid false positives in the contains() check below if the target DOM
    // element is removed in the React mouse callback.
    const removeMouseCaptureListener = listen(
      doc,
      clickTrigger,

},
    ref,
  ) => {
    const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-item');
    const onSelectCtx = useContext(SelectableContext);
    const navContext = useContext(NavContext);

    const { activeKey } = navContext || {};
    const key = makeEventKey(eventKey, href);

    const active =
      propActive == null && key != null
        ? makeEventKey(activeKey) === key
        : propActive;

    const handleClick = useEventCallback(event => {
      // SafeAnchor handles the disabled case, but we handle it here
      // for other components
      if (disabled) return;
      if (onClick) onClick(event);
      if (onSelectCtx) onSelectCtx(key, event);
      if (onSelect) onSelect(key, event);
    });

    return (

setMenu,
      setToggle,
    ],
  );

  if (menuElement && lastShow && !show) {
    focusInDropdown.current = menuElement.contains(document.activeElement);
  }

  const focusToggle = useEventCallback(() => {
    if (toggleElement && toggleElement.focus) {
      toggleElement.focus();
    }
  });

  const maybeFocusFirst = useEventCallback(() => {
    const type = lastSourceEvent.current;
    let focusType = focusFirstItemOnShow;

    if (focusType == null) {
      focusType =
        menuRef.current && matches(menuRef.current, '[role=menu]')
          ? 'keyboard'
          : false;
    }

    if (
      focusType === false ||
      (focusType === 'keyboard' && !/^key.+$/.test(type))
    ) {
      return;
    }

warning(
        !!currentTarget,
        'RootClose captured a close event but does not have a ref to compare it to. ' +
          'useRootClose(), should be passed a ref that resolves to a DOM node',
      );

      preventMouseRootCloseRef.current =
        !currentTarget ||
        isModifiedEvent(e) ||
        !isLeftClickEvent(e) ||
        contains(currentTarget, e.target);
    },
    [ref],
  );

  const handleMouse = useEventCallback(e => {
    if (!preventMouseRootCloseRef.current) {
      onClose(e);
    }
  });

  const handleKeyUp = useEventCallback(e => {
    if (e.keyCode === escapeKeyCode) {
      onClose(e);
    }
  });

  useEffect(() => {
    if (disabled || ref == null) return undefined;

    const doc = ownerDocument(ref.current);

(
    { bsPrefix, className, children, label, as: Component, onClick, ...props },
    ref,
  ) => {
    bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-toggler');

    const { onToggle, expanded } = useContext(NavbarContext) || {};

    const handleClick = useEventCallback(e => {
      if (onClick) onClick(e);
      if (onToggle) onToggle();
    });

    if (Component === 'button') {
      props.type = 'button';
    }

    return (

toggle,
      drop,
      show,
      alignEnd,
      menuElement,
      toggleElement,
      setMenu,
      setToggle,
    ],
  );

  if (menuElement && lastShow && !show) {
    focusInDropdown.current = menuElement.contains(document.activeElement);
  }

  const focusToggle = useEventCallback(() => {
    if (toggleElement && toggleElement.focus) {
      toggleElement.focus();
    }
  });

  const maybeFocusFirst = useEventCallback(() => {
    const type = lastSourceEvent.current;
    let focusType = focusFirstItemOnShow;

    if (focusType == null) {
      focusType =
        menuRef.current && matches(menuRef.current, '[role=menu]')
          ? 'keyboard'
          : false;
    }

const Alert = React.forwardRef((uncontrolledProps, ref) => {
  const {
    bsPrefix,
    show,
    closeLabel,
    className,
    children,
    variant,
    onClose,
    dismissible,
    transition: Transition,
    ...props
  } = useControllable(uncontrolledProps, controllables);

  const prefix = useBootstrapPrefix(bsPrefix, 'alert');
  const handleClose = useEventCallback(e => {
    onClose(false, e);
  });

  const alert = (
    <div role="alert">
      {dismissible &amp;&amp; }
      {children}</div>

props['data-rb-event-key'] = navKey;
      props.id = navContext.getControllerId(navKey);
      props['aria-controls'] = navContext.getControlledId(navKey);

      isActive =
        active == null && navKey != null
          ? navContext.activeKey === navKey
          : active;
    }

    if (props.role === 'tab') {
      props.tabIndex = isActive ? tabIndex : -1;
      props['aria-selected'] = isActive;
    }

    const handleOnclick = useEventCallback(e => {
      if (onClick) onClick(e);
      if (navKey == null) return;
      if (onSelect) onSelect(navKey, e);
      if (parentOnSelect) parentOnSelect(navKey, e);
    });

    return (
      
    );
  },
);

{
      bsPrefix,
      closeLabel,
      closeButton,
      onHide,
      className,
      children,
      ...props
    },
    ref,
  ) => {
    bsPrefix = useBootstrapPrefix(bsPrefix, 'modal-header');

    const context = useContext(ModalContext);

    const handleClick = useEventCallback(() => {
      if (context) context.onHide();
      if (onHide) onHide();
    });

    return (
      <div>
        {children}

        {closeButton &amp;&amp; (
          
        )}
      </div>
    );
  },
);

(
    { bsPrefix, closeLabel, closeButton, className, children, ...props },
    ref,
  ) => {
    bsPrefix = useBootstrapPrefix(bsPrefix, 'toast-header');

    const context = useContext(ToastContext);

    const handleClick = useEventCallback(() => {
      if (context) {
        context.onClose();
      }
    });

    return (
      <div>
        {children}

        {closeButton &amp;&amp; (
          </div>