How to use the @ui5/webcomponents-react/lib/AvatarShape.AvatarShape.Circle function in @ui5/webcomponents-react

const classes = useStyles();

  const cssClasses = [classes.avatar];
  const inlineStyle: CSSProperties = {};
  if (size === AvatarSize.Custom) {
    inlineStyle.fontSize = customFontSize;
    inlineStyle.width = customDisplaySize;
    inlineStyle.height = customDisplaySize;
    inlineStyle.lineHeight = customDisplaySize;
  } else {
    cssClasses.push(classes[`size${size}`]);
  }

  inlineStyle['--sapUiContentNonInteractiveIconColor'] = 'var(--sapContent_ContrastIconColor)';

  if (shape === AvatarShape.Circle) {
    cssClasses.push(classes.circle);
  }

  if (image) {
    inlineStyle.backgroundImage = `url(${image})`;
  }

  if (onClick) {
    inlineStyle.cursor = 'pointer';
  }

  if (className) {
    cssClasses.push(className);
  }
  if (style) {
    Object.assign(inlineStyle, style);

const renderAvatar = useMemo(() => {
      if (avatar) {
        return (
          <div>
            {typeof avatar === 'string' ? (
              
            ) : (
              avatar
            )}
          </div>
        );
      }
      return null;
    }, [avatar]);

export const defaultStory = () => (
  }
    priority={select('priority', Priority, Priority.None)}
    onClick={action('Notification clicked')}
    noShowMoreButton={boolean('noShowMoreButton', false)}
    truncate={boolean('truncate', true)}
    noCloseButton={boolean('noCloseButton', false)}
    onClose={action('Closed')}
  />
);

export const withInitials = () => (
  
);
withInitials.story = {

className={cssClasses.join(' ')}
      style={inlineStyle}
      onClick={handleOnClick}
      tabIndex={0}
      onKeyDown={handleKeyDown}
      title={tooltip}
      slot={slot}
    >
      {initials ? initials : children}
    
  );
});

Avatar.defaultProps = {
  size: AvatarSize.S,
  shape: AvatarShape.Circle,
  initials: null,
  image: null,
  onClick: null,
  customDisplaySize: '3rem',
  customFontSize: '1.125rem'
};

Avatar.displayName = 'Avatar';

export { Avatar };

export const defaultStory = () => (
  }
    priority={select('priority', Priority, Priority.None)}
    onClick={action('Notification clicked')}
    noShowMoreButton={boolean('noShowMoreButton', false)}
    autoPriority={boolean('autoPriority', true)}
    collapsed={boolean('collapsed', false)}
    noCloseButton={boolean('noCloseButton', false)}
    truncate={boolean('truncate', true)}
    onClose={action('Group closed')}
  >