How to use the @bentley/ui-core.Rectangle.create function in @bentley/ui-core

public componentDidUpdate() {
    if (!this._zonesMeasurer.current || !this.props.runtimeProps)
      return;
    const bounds = Rectangle.create(this._zonesMeasurer.current.getBoundingClientRect());
    this.props.runtimeProps.nineZoneChangeHandler.handleZonesBoundsChange(bounds);
  }

public setZonesBounds(zonesBounds: RectangleProps, props: ZonesManagerProps): ZonesManagerProps {
    const newBounds = Rectangle.create(zonesBounds);
    if (newBounds.equals(props.zonesBounds))
      return props;

    const offset = newBounds.topLeft().getOffsetTo(Rectangle.create(props.zonesBounds).topLeft());
    props = {
      ...props,
      zonesBounds,
    };

    const resizeBounds = this.getWindowResizeBounds(props);
    for (const zId of widgetZoneIds) {
      props = this.setZoneBounds(zId, resizeBounds[zId], props);

      const zone = props.zones[zId];
      const floating = zone.floating;
      if (!floating)
        continue;

      const floatingBounds = Rectangle.create(floating.bounds).offset(offset).toProps();
      props = this.setZoneFloatingBounds(zId, floatingBounds, props);

private _handleResizeStart = (args: ResizeGripResizeArgs) => {
    const bounds = Rectangle.create(args.bounds);
    this._relativePosition = bounds.topLeft().getOffsetTo(args.position);
  }

this.setState((prevState) => {
      if (!this._viewport)
        return null;
      if (!this._position)
        return null;

      const containerBounds = Rectangle.create(this._viewport.getBoundingClientRect());
      const relativeBounds = Rectangle.createFromSize(this._size).offset(this._position);
      const viewportOffset = new Point().getOffsetTo(containerBounds.topLeft());

      const adjustedPosition = offsetAndContainInContainer(relativeBounds, containerBounds.getSize(), offset);
      const position = adjustedPosition.offset(viewportOffset);

      if (position.equals(prevState.position))
        return null;

      return {
        position,
      };
    });
  }

public getInitialBounds(zoneId: WidgetZoneId, props: ZonesManagerProps): RectangleProps {
    const zonesBounds = Rectangle.create(props.zonesBounds);
    const rootBounds = Rectangle.createFromSize(zonesBounds.getSize());
    if (zoneId === 8 && props.isInFooterMode) {
      return new Rectangle(rootBounds.left, rootBounds.bottom, rootBounds.right, rootBounds.bottom);
    }

    const rootSize = rootBounds.getSize();
    const cell = getZoneCell(zoneId);
    const left = rootBounds.left + rootSize.width * cell.col / 3;
    const right = rootBounds.left + rootSize.width * (cell.col + 1) / 3;
    const top = rootBounds.top + rootSize.height * cell.row / 3;
    const bottom = rootBounds.top + rootSize.height * (cell.row + 1) / 3;
    const zoneBounds = new Rectangle(left, top, right, bottom);

    const zone = props.zones[zoneId];
    if (zone.widgets.length === 1 && zone.widgets[0] === zone.id)
      return zoneBounds;

public handleWidgetResize({ filledHeightDiff, handle, zoneId, resizeBy }: ZonesManagerWidgetResizeArgs, props: ZonesManagerProps): ZonesManagerProps {
    const zone = props.zones[zoneId];
    const zoneBounds = Rectangle.create(zone.bounds);
    const bounds = zoneBounds.setHeight(zoneBounds.getHeight() - filledHeightDiff).toProps();
    const filledProps = this.setZoneBounds(zoneId, bounds, props);

    let resizedProps;
    const resizeStrategy = this.getResizeStrategy(handle, resizeBy);
    if (zone.floating)
      resizedProps = resizeStrategy.tryResizeFloating(zoneId, Math.abs(resizeBy), filledProps);
    else
      resizedProps = resizeStrategy.tryResize(zoneId, Math.abs(resizeBy), filledProps);

    if (resizedProps === filledProps)
      return props;

    return this.setZoneIsLayoutChanged(zoneId, true, resizedProps);
  }

private animateOut() {
    if (!this._toast.current || !this.props.animateOutTo)
      return;

    const animateTo = Rectangle.create(this.props.animateOutTo.getBoundingClientRect());
    const toast = Rectangle.create(this._toast.current.getBoundingClientRect());
    const offset = toast.center().getOffsetTo(animateTo.center()).offsetY(-toast.getHeight() / 2);

    this._toast.current.style.transform = `translate(${offset.x}px, ${offset.y}px)`;

    window.requestAnimationFrame(() => {
      if (!this._toast.current)
        return;

      this._toast.current.style.width = Css.toPx(toast.getWidth());
      this._toast.current.style.height = Css.toPx(toast.getHeight());

      window.requestAnimationFrame(() => {
        if (!this._toast.current)
          return;

        this._toast.current.style.width = Css.toPx(0);

private _handleTabDragStart = (widgetId: WidgetZoneId, tabIndex: number, initialPosition: PointProps, firstTabBounds: RectangleProps) => {
    if (!this._widgetStack.current)
      return;

    const tabBounds = Rectangle.create(firstTabBounds);
    const stackedWidgetBounds = Rectangle.create(this._widgetStack.current.getBounds());
    const offsetToFirstTab = stackedWidgetBounds.topLeft().getOffsetTo(tabBounds.topLeft());
    const isHorizontal = this.props.verticalAnchor === VerticalAnchor.BottomPanel || this.props.verticalAnchor === VerticalAnchor.TopPanel;
    let widgetBounds;
    if (isHorizontal)
      widgetBounds = stackedWidgetBounds.offsetX(offsetToFirstTab.x);
    else
      widgetBounds = stackedWidgetBounds.offsetY(offsetToFirstTab.y);

    this.props.widgetChangeHandler.handleTabDragStart(widgetId, tabIndex, initialPosition, widgetBounds);
  }

public setFloatingBounds(bounds: RectangleProps, props: ZoneManagerProps): ZoneManagerProps {
    if (!props.floating)
      throw new ReferenceError();
    if (Rectangle.create(bounds).equals(props.floating.bounds))
      return props;
    return {
      ...props,
      floating: {
        ...props.floating,
        bounds,
      },
    };
  }
}

private animateOut() {
    if (!this._toast.current || !this.props.animateOutTo)
      return;

    const animateTo = Rectangle.create(this.props.animateOutTo.getBoundingClientRect());
    const toast = Rectangle.create(this._toast.current.getBoundingClientRect());
    const offset = toast.center().getOffsetTo(animateTo.center()).offsetY(-toast.getHeight() / 2);

    this._toast.current.style.transform = `translate(${offset.x}px, ${offset.y}px)`;

    window.requestAnimationFrame(() => {
      if (!this._toast.current)
        return;

      this._toast.current.style.width = Css.toPx(toast.getWidth());
      this._toast.current.style.height = Css.toPx(toast.getHeight());

      window.requestAnimationFrame(() => {
        if (!this._toast.current)
          return;