How to use the @ui5/webcomponents-react/lib/PlacementType.PlacementType.Top function in @ui5/webcomponents-react

export const defaultStory = () => (
  Open ActionSheet}
    placement={select('placement', [PlacementType.Top, PlacementType.Bottom], PlacementType.Top)}
  >
    <button>Accept</button>
    <button>Reject</button>
    <button>This is my super long text!</button>
  
);

<div>
        <div data-value="paginationArrow">
          
        </div>
        <div data-value="paginationArrow">
          
        </div>
      </div>
    );
  }

  const paginationClasses = StyleClassHelper.of(classes.pagination);
  if (arrowsPlacement === CarouselArrowsPlacement.Content) {
    paginationClasses.put(classes.paginationArrowContent);
  }
  if (pageIndicatorPlacement === PlacementType.Top) {
    paginationClasses.put(classes.paginationTop);
  }
  if (pageIndicatorPlacement === PlacementType.Bottom) {
    paginationClasses.put(classes.paginationBottom);
  }

  return (
    <div>
      <div data-value="paginationArrow">
        
      </div>

      <div>
        {showPageIndicator &amp;&amp; showTextIndicator &amp;&amp; <label>{`Showing ${activePage + 1} of ${numberOfChildren}`}</label>}

        {showPageIndicator &amp;&amp;</div></div>

const renderCarouselWithOneChild = () => {
  return (
    
      <label>Carousel 1. This is the content of the Carousel.</label>
    
  );
};
renderCarouselWithOneChild.story = {

[goToPreviousPage, goToNextPage]
  );

  const translateXPrefix = document.dir === 'rtl' ? '' : '-';
  return (
    <div tabindex="{0}" role="list" slot="{props['slot']}" title="{tooltip}" style="{outerStyle}">
      {childElementCount &gt; 1 &amp;&amp; pageIndicatorPlacement === PlacementType.Top &amp;&amp; (
        
      )}
      <div style="{{"></div></div>