How to use the @ui5/webcomponents-react/lib/ObjectPageMode.ObjectPageMode.Default function in @ui5/webcomponents-react

useEffect(() => {
    if (!isMounted && selectedSectionIndex < 1) return;

    if (mode === ObjectPageMode.Default && scroller.current) {
      if (selectedSectionIndex > 0) {
        // @ts-ignore
        const id = Children.toArray(children)[selectedSectionIndex].props.id;
        if (id) {
          scroller.current.scrollToElementById(`ObjectPageSection-${id}`, 45);
        }
      } else {
        scroller.current.scrollToTop();
      }
    }
    if (mode === ObjectPageMode.IconTabBar) {
      adjustDummyDivHeight();
    }
  }, [selectedSectionIndex]);

export const renderComponentWithSections = () => (
  Action]}
    image={SampleImage}
    renderHeaderContent={renderHeaderContent}
    mode={select('mode', ObjectPageMode, ObjectPageMode.Default)}
    style={{ height: '700px' }}
  >
    
      <label>My Content 1</label>
    
    
      <label>My Content 2</label>
    
    
      <label>My Content 3</label>
    
  
);
renderComponentWithSections.story = {

);
    }

    return (
      
        {item.props.title}
      
    );
  };

  let sectionSelector = null;
  if (mode === ObjectPageMode.Default) {
    sectionSelector = (
      
        <span>{section.props.title}</span>
      
    );
  } else {
    sectionSelector = (
      <span>
        {section.props.title}
      </span>

);
});

ObjectPage.defaultProps = {
  title: '',
  subTitle: '',
  image: null,
  imageShapeCircle: false,
  headerActions: [],
  renderHeaderContent: null,
  mode: ObjectPageMode.Default,
  onSelectedSectionChanged: () => {},
  showHideHeaderButton: false,
  selectedSectionId: null,
  noHeader: false
};

ObjectPage.displayName = 'ObjectPage';

export { ObjectPage };