How to use the @patternfly/react-styles/css/components/DataList/data-list.modifiers function in @patternfly/react-styles

import * as React from 'react';
import { css, pickProperties } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/DataList/data-list';
import { Omit } from '../../helpers/typeUtils';

const visibilityModifiers = pickProperties(styles.modifiers, [
  'hidden',
  'hiddenOnSm',
  'hiddenOnMd',
  'hiddenOnLg',
  'hiddenOnXl',
  'hiddenOn_2xl',
  'visibleOnSm',
  'visibleOnMd',
  'visibleOnLg',
  'visibleOnXl',
  'visibleOn_2xl'
]);

export const DataListActionVisibility = Object.keys(visibilityModifiers)
  .map(key => [key.replace('_2xl', '2Xl'), visibilityModifiers[key]])
  .reduce((acc, curr) => ({ ...acc, [curr[0]]: curr[1] }), {});

}
      updateSelectedDataListItem(id);
    };

    const onKeyDown = (event: React.KeyboardEvent) => {
      if (event.key === KeyTypes.Enter) {
        updateSelectedDataListItem(id);
      }
    };

    return (
      <li aria-labelledby="{ariaLabelledBy}" id="{id}">
        {React.Children.map(
          children,
          child =&gt;
            React.isValidElement(child) &amp;&amp;
            React.cloneElement(child as React.ReactElement, {
              rowid: ariaLabelledBy
            })
        )}</li>

};

    const onKeyDown = (event: React.KeyboardEvent) => {
      if (event.key === KeyTypes.Enter) {
        updateSelectedDataListItem(id);
      }
    };

    return (
      <li aria-labelledby="{ariaLabelledBy}" id="{id}">
        {React.Children.map(
          children,
          child =&gt;
            React.isValidElement(child) &amp;&amp;
            React.cloneElement(child as React.ReactElement, {
              rowid: ariaLabelledBy
            })
        )}
      </li>
    );

children,
  id,
  isHidden,
  'aria-label': ariaLabel,
  noPadding,
  rowid,
  ...props
}) => (
  <section aria-label="{ariaLabel}" hidden="{isHidden}" id="{id}">
    <div>{children}</div>
  </section>
);

export const DataListCell: React.FunctionComponent = ({
  children = null,
  className = '',
  width = 1,
  isFilled = true,
  alignRight = false,
  isIcon = false,
  ...props
}: DataListCellProps) => (
  <div width=""> 1 &amp;&amp; getModifier(styles, `flex_${width}`, ''),
      !isFilled &amp;&amp; styles.modifiers.noFill,
      alignRight &amp;&amp; styles.modifiers.alignRight,
      isIcon &amp;&amp; styles.modifiers.icon,
      className
    )}
    {...props}
  &gt;
    {children}
  </div>
);

export const DataListCell: React.FunctionComponent = ({
  children = null,
  className = '',
  width = 1,
  isFilled = true,
  alignRight = false,
  isIcon = false,
  ...props
}: DataListCellProps) => (
  <div width=""> 1 &amp;&amp; getModifier(styles, `flex_${width}`, ''),
      !isFilled &amp;&amp; styles.modifiers.noFill,
      alignRight &amp;&amp; styles.modifiers.alignRight,
      isIcon &amp;&amp; styles.modifiers.icon,
      className
    )}
    {...props}
  &gt;
    {children}
  </div>
);