How to use the @ui5/webcomponents-react/lib/CarouselArrowsPlacement.CarouselArrowsPlacement.Content function in @ui5/webcomponents-react

showPageIndicator={showPageIndicator}
          pageIndicatorPlacement={pageIndicatorPlacement}
          activePage={currentlyActivePage}
          children={children}
          goToPreviousPage={goToPreviousPage}
          goToNextPage={goToNextPage}
        />
      )}
    
  );
});

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

export { Carousel };

}, [props.activePage, setCurrentlyActivePage]);

  const outerStyle = { width, height };
  if (style) {
    Object.assign(outerStyle, style);
  }

  const classes = useStyles();
  const classNameString = StyleClassHelper.of(classes.carousel);

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

  const carouselItemClasses = StyleClassHelper.of(classes.carouselItem);
  if (arrowsPlacement === CarouselArrowsPlacement.Content) {
    classNameString.put(classes.carouselArrowPlacementContent);
  }

  const selectPageAtIndex = useCallback(
    (index, event) => {
      setCurrentlyActivePage(index);
      onPageChanged(Event.of(null, event, { selectedIndex: index }));
    },
    [onPageChanged, setCurrentlyActivePage]
  );

  const childElementCount = Children.count(children);
  const goToNextPage = useCallback(
    (e, skipManualInversion = false) => {
      if (
        document.dir === 'rtl' &&

if (!shouldRenderPaginationBar) {
    return (
      <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></div></div>

(e, skipManualInversion = false) => {
      if (
        document.dir === 'rtl' &&
        arrowsPlacement === CarouselArrowsPlacement.Content &&
        e.type === 'click' &&
        !skipManualInversion
      ) {
        return goToNextPage(e, true);
      }
      if (loop === false && currentlyActivePage === 0) {
        return;
      }
      const previousPage = currentlyActivePage === 0 ? childElementCount - 1 : currentlyActivePage - 1;
      selectPageAtIndex(previousPage, e);
    },
    [loop, childElementCount, currentlyActivePage, selectPageAtIndex, arrowsPlacement, goToNextPage]