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

showCoPilot={boolean('showCoPilot', true)}
      onMenuItemClick={action('onMenuItemClick')}
      onCoPilotClick={action('onCoPilotClick')}
      onLogoClick={action('onLogoClick')}
      onNotificationsClick={action('onNotificationsClick')}
      onProfileClick={action('onProfileClick')}
      onProductSwitchClick={(e) => {
        // @ts-ignore
        document.getElementById('product-switch-popover').openBy(e.getParameter('targetRef'));
      }}
      searchField={null}
      startButton={null}
    >
      
    
    

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

<div data-value="paginationArrow">
          
        </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;
          !showTextIndicator &amp;&amp;
          Children.map(children, (item, index) =&gt; (
            </div></div>

break;
      }
      if (popoverRef.current) {
        popoverRef.current.close();
      }
    },
    [column, popoverRef, onGroupBy]
  );

  return (
    
      
        {showSort && (
          
            Sort Ascending
          
        )}
        {showSort && (
          
            Sort Descending
          
        )}
        {showFilter && !column.isGrouped && (

popoverRef.current.close();
      if (typeof handler === 'function') {
        handler();
      }
    };

    return (
      
        <ul>{Children.map(children, renderActionSheetButton)}</ul>
      
    );
  }
);

ActionSheet.defaultProps = {
  placement: PlacementType.Bottom
};
ActionSheet.displayName = 'ActionSheet';

export { ActionSheet };

}}
      >
        {Children.map(children, (item, index) => (
          <div style="{{" aria-setsize="{childElementCount}" aria-posinset="{index}" role="listitem">
            {item}
          </div>
        ))}
      
      {childElementCount &gt; 1 &amp;&amp; pageIndicatorPlacement === PlacementType.Bottom &amp;&amp; (
        
      )}
    
  );
});

);
  } else {
    sectionSelector = (
      <span>
        {section.props.title}
      </span>
    );
  }

  return (
    <li>
      {sectionSelector}
      {subSectionsAvailable &amp;&amp; (
        
          
            {section.props.children
              .filter((item) =&gt; item.props &amp;&amp; item.props.isSubSection)
              .map(renderSubSectionListItem)}
          
        
      )}
    </li>
  );
};

export const renderCarousel = () => {
  return (
    
      <label>Carousel 1. This is the content of the Carousel.</label>
      <div>
        <p>This is a larger content</p>
        <br>
        <p>This is a larger content</p>
      </div>
      <label>Carousel 2</label>
      <label>Carousel 3</label>
      <label>Carousel 4</label>
      <label>Carousel 5</label>
    
  );
};

>
              {item.label}
            
          ))}
        
      
    );
  }
);

VariantManagement.defaultProps = {
  popupTitle: 'Variants',
  initialSelectedKey: null,
  onSelect: () => {},
  closeOnItemSelect: true,
  placement: PlacementType.Bottom,
  level: TitleLevel.H4,
  disabled: false
};
VariantManagement.displayName = 'Variant Management';

export { VariantManagement };

/>
      )}
    
  );
});

Carousel.displayName = 'Carousel';
Carousel.defaultProps = {
  activePage: 0,
  arrowsPlacement: CarouselArrowsPlacement.Content,
  onPageChanged: () => {},
  height: '100%',
  width: '100%',
  showPageIndicator: true,
  loop: false,
  pageIndicatorPlacement: PlacementType.Bottom
};

export { Carousel };