How to use the @ui5/webcomponents-react-base/lib/useScrollElement.useScrollElement function in @ui5/webcomponents-react-base

(props: ObjectPageSectionPropTypes, ref: RefObject) => {
    const { title, id, children, titleUppercase, className, style, tooltip } = props;
    const classes = useStyles();

    if (!id) {
      throw new EmptyIdPropException('ObjectPageSection requires a unique ID property!');
    }

    const sectionRef: RefObject = useConsolidatedRef(ref);
    const htmlId = `ObjectPageSection-${id}`;

    useScrollElement(htmlId, sectionRef, {
      spy: true
    });

    const titleClasses = StyleClassHelper.of(classes.title);
    if (titleUppercase) {
      titleClasses.put(classes.uppercase);
    }

    return (
      <section title="{tooltip}" style="{style}" role="region" id="{htmlId}">
        <div role="heading">
          <div>{title}</div>
        </div>
        {/* TODO Check for subsections as they should win over the children */}
        <div>
          <div>{children}</div></div></section>

(props: ObjectPageSubSectionPropTypes, ref: RefObject) => {
    const { children, id, title, className, style, tooltip } = props;

    if (!id) {
      throw new EmptyIdPropException('ObjectPageSubSection requires a unique ID property!');
    }

    const htmlRef: RefObject = useConsolidatedRef(ref);
    const htmlId = `ObjectPageSubSection-${id}`;

    useScrollElement(htmlId, htmlRef, {
      spy: false
    });

    const classes = useStyles();
    const subSectionClassName = StyleClassHelper.of(classes.objectPageSubSection);
    if (className) {
      subSectionClassName.put(className);
    }

    return (