How to use the @patternfly/react-styles/css/components/Dropdown/dropdown.modifiers function in @patternfly/react-styles

{({ toggleClass }) => (
          <button type="{type" id="{id}"> onToggle(!isOpen, event)}
            aria-expanded={isOpen}
            aria-haspopup={ariaHasPopup}
            onKeyDown={event =&gt; this.onKeyDown(event)}
            disabled={isDisabled}
          &gt;
            {children}
          </button>
        )}

const DropdownToggle = ({ children, iconComponent: IconComponent, splitButtonItems, ...props }) => {
  const toggle = (
    
      {children &amp;&amp; <span>{children}</span>}
      {IconComponent &amp;&amp; }
    
  );

  if (splitButtonItems) {
    return (
      <div>
        {splitButtonItems}
        {toggle}
      </div>
    );
  }

  return toggle;
};

>
      
        <div>
          
            {children}
          
        </div>
      
    
  );
};

{({ baseClass, baseComponent, id: contextId }) => {
          const BaseComponent = baseComponent as any;
          return (
            
              {React.Children.map(toggle, oneToggle =>
                React.cloneElement(oneToggle, {
                  parentRef: this.baseComponentRef,
                  isOpen,
                  id,
                  isPlain,
                  ariaHasPopup,

}: DropdownProps) => (
   onSelect && onSelect(event),
      toggleTextClass: styles.dropdownToggleText,
      toggleIconClass: styles.dropdownToggleIcon,
      menuClass: styles.dropdownMenu,
      itemClass: styles.dropdownMenuItem,
      toggleClass: styles.dropdownToggle,
      baseClass: styles.dropdown,
      baseComponent: 'div',
      sectionClass: styles.dropdownGroup,
      sectionTitleClass: styles.dropdownGroupTitle,
      sectionComponent: 'section',
      disabledClass: styles.modifiers.disabled,
      hoverClass: styles.modifiers.hover,
      separatorClass: styles.dropdownSeparator
    }}
  >
    
  
);

{({ baseClass, baseComponent, id: contextId }) => {
          const BaseComponent = baseComponent as any;
          return (
            
              {React.Children.map(toggle, oneToggle =>
                React.cloneElement(oneToggle, {
                  parentRef: this.baseComponentRef,
                  isOpen,
                  id,
                  isPlain,

>
              {renderWithTooltip(
                isComponentReactElement ? (
                  React.cloneElement(Component as React.ReactHTMLElement, {
                    ...additionalProps,
                    className: css(classes, itemClass, variant === 'icon' && styles.modifiers.icon)
                  })
                ) : (
                  
                    {children}
                  
                )
              )}
              {additionalChild && this.extendAdditionalChildRef()}
            
          );
        }}

>
          {children &amp;&amp; <span>{children}</span>}
          {IconComponent &amp;&amp; }
        
      )}
    
  );

  if (splitButtonItems) {
    return (
      <div>
        {splitButtonItems}
        {toggle}
      </div>
    );
  }

  return toggle;
};

{({ toggleClass }) => (
          <button type="{type" id="{id}"> onToggle(!isOpen, event)}
            aria-expanded={isOpen}
            aria-haspopup={ariaHasPopup}
            onKeyDown={event =&gt; this.onKeyDown(event)}
            disabled={isDisabled}
          &gt;
            {children}
          </button>
        )}

{({ onSelect, menuClass }) => (
              <div hidden="{!isOpen}"> onSelect &amp;&amp; onSelect(event)}
              &gt;
                {children}
              </div>
            )}