How to use the @ui5/webcomponents-react/lib/ContentDensity.ContentDensity.Compact function in @ui5/webcomponents-react

const style = ({ parameters, contentDensity }: JSSTheme) => ({
  header: {
    display: 'flex',
    height: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem',
    lineHeight: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem',
    textAlign: 'center',
    width: 'auto',
    alignItems: 'center',
    '& $icon': {
      '& >*': {
        verticalAlign: 'middle'
      }
    },
    // justifyContent: 'center',
    padding: '0.25rem 1rem',
    boxSizing: 'border-box',
    borderBottom: `1px solid var(--messageBoxBorderColor)`,
    color: parameters.sapUiContentLabelColor,
    fontSize: '1rem',
    '&[data-type="Error"]': {
      '--sapUiPageFooterBorderColor': parameters.sapUiErrorBorder,

wrapper: (getStory, context) => {
    function setQueryParam(queryObj) {
      const iframe = window.parent.document.getElementById('storybook-preview-iframe');
      const [base, search] = iframe.src.split('?');
      const currentQuery = qs.parse(search, { ignoreQueryPrefix: true });
      iframe.src = `${base}?${qs.stringify({ ...currentQuery, ...queryObj })}`;
    }

    let contentDensity;
    try {
      const iframe = window.parent.document.getElementById('storybook-preview-iframe');
      const currentQuery = qs.parse(iframe.src.split('?')[1]);
      contentDensity =
        currentQuery['sap-ui-compactSize'] && currentQuery['sap-ui-compactSize'] !== 'false'
          ? ContentDensity.Compact
          : ContentDensity.Cozy;
    } catch (e) {
      contentDensity = ContentDensity.Cozy;
    }

    return (
      
        {getStory(context)}
      
    );
  }
});

const internalRowHeight = useMemo(() => {
    let height = theme.contentDensity === ContentDensity.Compact ? ROW_HEIGHT_COMPACT : ROW_HEIGHT_COZY;
    if (rowHeight) {
      height = rowHeight;
    }
    return height;
  }, [rowHeight, theme.contentDensity]);

(props: SideNavigationListItemProps, ref: Ref) => {
    const { icon, text, id, children, tooltip, slot, className, style } = props;

    const [isExpanded, setExpanded] = useState(false);

    const handleToggleExpand = useCallback(() => {
      setExpanded(!isExpanded);
    }, [isExpanded, setExpanded]);

    const classes = useStyles();
    const theme = useTheme() as JSSTheme;

    const listItemClasses = StyleClassHelper.of(classes.listItem);
    if (theme.contentDensity === ContentDensity.Compact) {
      listItemClasses.put(classes.compact);
    }

    if (className) {
      listItemClasses.put(className);
    }

    if (isExpanded) {
      listItemClasses.put(classes.expanded);
    }

    const noIcons = props['noIcons'];
    if (noIcons) {
      listItemClasses.put(classes.noIcons);
    }

const styles = ({ contentDensity }) => ({
  segmentedButton: {
    verticalAlign: 'top',
    position: 'relative',
    margin: '0',
    padding: contentDensity === ContentDensity.Compact ? '0.1875rem 0' : '0.250rem 0',
    border: 'none',
    whiteSpace: 'nowrap',
    display: 'inline-block',
    boxSizing: 'border-box',
    maxWidth: '100%',
    height: contentDensity === ContentDensity.Compact ? '2rem' : '3rem',
    '&:focus': {
      outline: 'none'
    }
  }
});

top: contentDensity === ContentDensity.Compact ? '2.5rem' : '2.75rem'
      }
    },
    pageWithFooter: {
      '& $contentSection': {
        bottom: contentDensity === ContentDensity.Compact ? '2.5rem' : '2.75rem'
      }
    },
    pageFooter: {
      position: 'absolute',
      bottom: '0',
      left: '0',
      width: '100%',
      borderTop: `1px solid ${parameters.sapUiPageFooterBorderColor}`,
      '& >*': {
        height: contentDensity === ContentDensity.Compact ? '2.5rem' : '2.75rem',
        background: parameters.sapUiPageFooterBackground,
        borderTop: `0.0625rem solid ${parameters.sapUiPageFooterBorderColor}`
      }
    }
  };
};

const styles = ({ contentDensity }) => ({
  segmentedButton: {
    verticalAlign: 'top',
    position: 'relative',
    margin: '0',
    padding: contentDensity === ContentDensity.Compact ? '0.1875rem 0' : '0.250rem 0',
    border: 'none',
    whiteSpace: 'nowrap',
    display: 'inline-block',
    boxSizing: 'border-box',
    maxWidth: '100%',
    height: contentDensity === ContentDensity.Compact ? '2rem' : '3rem',
    '&:focus': {
      outline: 'none'
    }
  }
});

updateTableSizes();
    Device.resize.attachHandler(updateTableSizes, null);
    return () => Device.resize.detachHandler(updateTableSizes, null);
  }, [updateTableSizes]);

  useEffect(() => {
    dispatch({ type: 'SET_GROUP_BY', payload: groupBy });
  }, [groupBy, dispatch]);

  useEffect(() => {
    dispatch({ type: 'SET_SELECTED_ROWS', selectedIds: selectedRowIds });
  }, [selectedRowIds, dispatch]);

  const tableContainerClasses = StyleClassHelper.of(classes.tableContainer);

  if (theme.contentDensity === ContentDensity.Compact) {
    tableContainerClasses.put(classes.compactSize);
  }

  if (!!rowHeight) {
    tableContainerClasses.put(classes.modifiedRowHeight);
  }

  const internalRowHeight = useMemo(() => {
    let height = theme.contentDensity === ContentDensity.Compact ? ROW_HEIGHT_COMPACT : ROW_HEIGHT_COZY;
    if (rowHeight) {
      height = rowHeight;
    }
    return height;
  }, [rowHeight, theme.contentDensity]);

  const tableBodyHeight = useMemo(() => {

fontFamily: parameters.sapUiFontFamily,
    listStyle: 'none',
    overflow: 'hidden',
    WebkitTapHighlightColor: 'rgba(255, 255, 255, 0)',
    textAlign: 'center',
    alignContent: 'center',
    alignItems: 'center',
    cursor: 'pointer',
    verticalAlign: 'text-bottom',
    boxSizing: 'border-box',
    display: 'inline-block',
    fontSize: '0.875rem',
    '&:focus': {
      outline: `1px dotted ${parameters.sapUiContentFocusColor}`
    },
    height: contentDensity === ContentDensity.Compact ? '1.625rem' : '2.25rem',
    lineHeight: contentDensity === ContentDensity.Compact ? '1.5rem' : '2.25rem',
    textShadow: 'none',
    '&:not($iconOnly)': { paddingLeft: '0.625rem', paddingRight: '0.625rem', textOverflow: 'ellipsis' },
    '&:first-child': {
      borderTopLeftRadius: '0.25rem',
      borderBottomLeftRadius: '0.25rem'
    },
    '&:last-child': {
      borderTopRightRadius: '0.25rem',
      borderBottomRightRadius: '0.25rem',
      borderRightColor: parameters.sapUiSegmentedButtonBorderColor
    },
    color: parameters.sapUiSegmentedButtonTextColor,
    border: `1px solid ${parameters.sapUiSegmentedButtonBorderColor}`,
    borderRightColor: 'transparent',
    backgroundColor: parameters.sapUiSegmentedButtonBackground