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

label: formatTooltipLabel(categoryAxisFormatter, valueAxisFormatter)
        }
      },
      plugins: {
        datalabels: {
          formatter: formatDataLabel(valueAxisFormatter)
        }
      }
    };
  }, [categoryAxisFormatter, valueAxisFormatter]);
  const chartOptions = useMergedConfig(lineChartDefaultConfig, options);

  const theme: any = useTheme();
  const data = useChartData(labels, datasets, colors, theme.theme);

  const chartRef = useConsolidatedRef(ref);
  const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);

  return (

(props: DialogPropTypes, dialogRef: RefObject) => {
    const localDialogRef = useConsolidatedRef(dialogRef);

    const setDialogOpen = (open) => {
      if (!localDialogRef.current || !localDialogRef.current.open) {
        return;
      }
      return open ? localDialogRef.current.open() : localDialogRef.current.close();
    };

    useEffect(() => {
      setDialogOpen(props.open);
    }, [props.open]);

    return ;
  }
);

}
      },
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'end',
          color: getCssVariableValue('--sapUiBaseText', '#32363a'),
          formatter: formatDataLabel(valueAxisFormatter)
        }
      }
    };
  }, [categoryAxisFormatter, valueAxisFormatter]);

  const mergedOptions = useMergedConfig(donutChartDefaultConfig, options);

  const chartRef = useConsolidatedRef(ref);

  const handleLegendItemPress = usePieLegendItemClickHandler(chartRef, legendRef);
  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);

  return (
    
  );
});

(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 (

(props: ActionSheetPropTypes, ref: RefObject) => {
    const { children, placement, openBy, style, slot } = props;

    const classes = useStyles();

    const actionSheetClasses = StyleClassHelper.of(classes.actionSheet);
    if (Device.system.tablet) {
      actionSheetClasses.put(classes.tablet);
    } else if (Device.system.phone) {
      actionSheetClasses.put(classes.phone);
    }

    const popoverRef: RefObject = useConsolidatedRef(ref);

    const renderActionSheetButton = (element) => {
      if (element && element.props) {
        return (
          <div>
            {cloneElement(element, {
              design: ButtonDesign.Transparent,
              onClick: onActionButtonClicked(element.props.onClick)
            })}
          </div>
        );
      }
      return element;
    };

    const onActionButtonClicked = (handler) =&gt; () =&gt; {

(props: PopoverPropTypes, givenRef: RefObject) => {
    const { propagateOpenByClickEvent, openBy, openByStyle, open, ...rest } = props;

    const openByRef: RefObject = useRef(null);

    const internalPopoverRef = useConsolidatedRef(givenRef);

    const handleOpenPopover = useCallback(
      (e) => {
        internalPopoverRef.current.openBy && internalPopoverRef.current.openBy(openByRef.current);
        if (e && !propagateOpenByClickEvent) {
          e.stopPropagation();
        }
      },
      [internalPopoverRef, openByRef]
    );

    const closePopover = useCallback(() => {
      internalPopoverRef.current.close && internalPopoverRef.current.close();
    }, [internalPopoverRef]);

    useEffect(() => {

const theme = useTheme();

  const objectPage: RefObject = useConsolidatedRef(ref);
  const fillerDivDomRef: RefObject = useRef();
  const scrollBar: RefObject = useRef();
  const contentContainer: RefObject = useRef();
  const topHeader: RefObject = useRef();
  const innerHeader: RefObject = useRef();
  const innerScrollBar: RefObject = useRef();
  const contentScrollContainer: RefObject = useRef();
  const collapsedHeaderFiller: RefObject = useRef();
  const lastScrolledContainer = useRef();
  const hideHeaderButtonPressed = useRef(false);
  const stableContentOnScrollRef = useRef(null);
  const stableBarOnScrollRef = useRef(null);
  const scroller = useConsolidatedRef(scrollerRef);
  const [scrollbarWidth, setScrollbarWidth] = useState(defaultScrollbarWidth);

  const classes = useStyles();

  const setScrollbarHeight = () => {
    requestAnimationFrame(() => {
      const scrollbarContainerHeight =
        contentScrollContainer.current.getBoundingClientRect().height +
        topHeader.current.getBoundingClientRect().height;
      innerScrollBar.current.style.height = `${scrollbarContainerHeight}px`;
    });
  };

  useEffect(() => {
    let selectedIndex = findSectionIndexById(children, selectedSectionId);
    if (selectedIndex === -1) {

(props: SegmentedButtonPropTypes, ref: Ref) => {
    const { children, disabled, className, style, tooltip, slot, onItemSelected, selectedKey } = props;

    const listRef: RefObject = useConsolidatedRef(ref);

    const [internalSelectedKey, setSelectedKey] = useState(() => {
      if (selectedKey) return selectedKey;
      const firstChild: any = Children.toArray(children)[0];
      if (firstChild && firstChild.props) {
        return firstChild.props.id;
      }
      return null;
    });

    useEffect(() => {
      if (selectedKey) {
        setSelectedKey(selectedKey);
      }
    }, [selectedKey, setSelectedKey]);

options,
    categoryAxisFormatter,
    valueAxisFormatter,
    getDatasetAtEvent,
    getElementAtEvent,
    colors,
    width,
    height,
    noLegend,
    legendRef
  } = props as BarChartPropTypes & InternalProps;

  const theme: any = useTheme();
  const data = useChartData(labels, datasets, colors, theme.theme);

  const chartRef = useConsolidatedRef(ref);

  const barChartDefaultConfig = useMemo(() => {
    return {
      scales: {
        xAxes: [
          {
            ...DEFAULT_OPTIONS.scales.yAxes[0],
            ticks: {
              callback: formatAxisCallback(valueAxisFormatter)
            }
          }
        ],
        yAxes: [
          {
            ...DEFAULT_OPTIONS.scales.xAxes[0],
            ticks: {

plugins: {
        datalabels: {
          anchor: 'end',
          align: 'end',
          color: getCssVariableValue('--sapUiBaseText', '#32363a'),
          formatter: (val, context) => {
            return valueAxisFormatter(val, context.dataset, context);
          }
        }
      }
    };
  }, [categoryAxisFormatter, valueAxisFormatter]);

  const mergedOptions = useMergedConfig(pieChartDefaultConfig, options);

  const chartRef = useConsolidatedRef(ref);

  const handleLegendItemPress = usePieLegendItemClickHandler(chartRef, legendRef);
  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);

  return (
    
  );
});