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

{({ ContentContainer }) => {
      const Container = component || ContentContainer;
      return (
        
          <div>{children}</div>
        
      );
    }}

const AccordionContent = ({ className, children, id, isHidden, isFixed, 'aria-label': ariaLabel, ...props }) => (
  <dd aria-label="{ariaLabel}" hidden="{isHidden}" id="{id}">
    <div>{children}</div>
  </dd>
);

const AccordionContent = ({ className, children, id, isHidden, isFixed, 'aria-label': ariaLabel, ...props }) => (
  <dd aria-label="{ariaLabel}" hidden="{isHidden}" id="{id}">
    <div>{children}</div>
  </dd>
);

const AccordionToggle = ({ className, id, isExpanded, children, ...props }) => (
  <dt>
    <h3>
      <button aria-expanded="{isExpanded}" id="{id}">
        <span>{children}</span>
        
      </button>
    </h3>
  </dt>
);

export const Accordion: React.FunctionComponent = ({
  children = null,
  className = '',
  'aria-label': ariaLabel = '',
  headingLevel = 'h3',
  asDefinitionList = true,
  noBoxShadow = false,
  ...props
}: AccordionProps) => {
  const AccordionList: any = asDefinitionList ? 'dl' : 'div';
  return (
    
      
        {children}
      
    
  );
};

{({ ContentContainer }) => {
      const Container = component || ContentContainer;
      return (
        
          <div>{children}</div>
        
      );
    }}

{({ ToggleContainer }) => {
      const Container = component || ToggleContainer;
      return (
        
          <button aria-expanded="{isExpanded}" id="{id}">
            <span>{children}</span>
            
          </button>
        
      );
    }}