How to use the @patternfly/react-styles.getModifier function in @patternfly/react-styles

export const FormHelperText: React.FunctionComponent = ({
  children = null,
  isError = false,
  isHidden = true,
  className = '',
  ...props
}: FormHelperTextProps) => (
  <p>
    {children}
  </p>
);

const Alignment = ({ children, className, align, component: Component, ...props }) => (
  
    {children}
  
);

'aria-valuemax': max
    };

    if (valueText) {
      ariaProps['aria-valuetext'] = valueText;
    }

    const scaledValue = Math.min(100, Math.max(0, Math.floor(((value - min) / (max - min)) * 100)));
    return (
      <div role="progressbar" id="{this.id}">
        
      </div>

'aria-label': ariaLabel = getDefaultAriaLabel(variant),
  action,
  title,
  children,
  className,
  ...props
}) => {
  variantLabel = variantLabel || capitalize(AlertVariant[variant]);
  const readerTitle = (
    
      <span>{`${variantLabel} alert:`}</span>
      {title}
    
  );

  const customClassName = css(styles.alert, getModifier(styles, variant, styles.modifiers.info), className);

  return (
    <div aria-label="{ariaLabel}">
      
      <h4>{readerTitle}</h4>
      {children &amp;&amp; (
        <div>
          <p>{children}</p>
        </div>
      )}
      {action &amp;&amp; (
        <div>{React.cloneElement(action, { title, variantLabel })}</div>
      )}
    </div>
  );
};

export const getOffsetModifier = (value, size) => getModifier(styles, `offset-${value}-col${getSizeSuffix(size)}`);

export const cellWidth = (width: number | string): ITransform => () => ({
  className: css(getModifier(styles, `width_${width}`))
});

export const getRowSpanModifier = (value, size) => getModifier(styles, `${value}-row${getSizeSuffix(size)}`);

const Title = ({ size, className, children, headingLevel: HeadingLevel, ...props }) => (
  
    {children}
  
);

{randomId =>
          (
            
              <div aria-describedby="{`popover-${randomId}-body`}" aria-labelledby="{headerContent" aria-label="{headerContent" aria-modal="true" role="dialog">
                
                  
                  {headerContent &amp;&amp; {headerContent}}
                  {bodyContent}
                  {footerContent &amp;&amp; {footerContent}}
                
              </div>

children = null,
  className = '',
  to = null,
  isActive = false,
  target = null,
  component = 'a',
  ...props
}: BreadcrumbItemProps) => {
  const Component = component as any;
  return (
    <li>
      {to &amp;&amp; (
        
          {children}
        
      )}
      {!to &amp;&amp; {children}}
      {!isActive &amp;&amp; (
        <span>
          
        </span>
      )}
    </li>
  );
};