How to use the @bentley/ui-framework.ContentGroup function in @bentley/ui-framework

if (!contentLayoutProps) {
      throw (Error("Could not find layout ContentLayoutProps when number of viewStates=" + this.viewStates.length));
    }

    const contentLayoutDef: ContentLayoutDef = new ContentLayoutDef(contentLayoutProps);

    // create the content props that specifies an iModelConnection and a viewState entry in the application data.
    const contentProps: ContentProps[] = [];
    for (const viewState of this.viewStates) {
      const thisContentProps: ContentProps = {
        classId: IModelViewportControl,
        applicationData: { viewState, iModelConnection: this.iModelConnection },
      };
      contentProps.push(thisContentProps);
    }
    const myContentGroup: ContentGroup = new ContentGroup({ contents: contentProps });
    return (
      } />,
            ]}
          />
        }
        topCenter={

iconSpec: "icon-placeholder", labelKey: "SampleApp:buttons.restoreContentLayout", badgeType: BadgeType.New, execute: async () => {
        const iModelConnection = UiFramework.getIModelConnection();
        if (ViewsFrontstage.savedViewLayoutProps && iModelConnection) {
          // Parse SavedViewLayoutProps
          const savedViewLayoutProps: SavedViewLayoutProps = JSON.parse(ViewsFrontstage.savedViewLayoutProps);
          // Create ContentLayoutDef
          const contentLayoutDef = new ContentLayoutDef(savedViewLayoutProps.contentLayoutProps);
          // Create ViewStates
          const viewStates = await SavedViewLayout.viewStatesFromProps(iModelConnection, savedViewLayoutProps);

          // Add applicationData to the ContentProps
          savedViewLayoutProps.contentGroupProps.contents.forEach((contentProps: ContentProps, index: number) => {
            contentProps.applicationData = { viewState: viewStates[index], iModelConnection, rulesetId: "Items" };
          });
          const contentGroup = new ContentGroup(savedViewLayoutProps.contentGroupProps);

          // activate the layout
          await ContentLayoutManager.setActiveLayout(contentLayoutDef, contentGroup);

          // emphasize the elements
          SavedViewLayout.emphasizeElementsFromProps(contentGroup, savedViewLayoutProps);
        }
      },
    });

public get frontstage(): React.ReactElement {
    const contentLayoutDef: ContentLayoutDef = new ContentLayoutDef(
      { // Four Views, two stacked on the left, two stacked on the right.
        descriptionKey: "SampleApp:ContentLayoutDef.FourQuadrants",
        verticalSplit: {
          percentage: 0.50,
          minSizeLeft: 100, minSizeRight: 100,
          left: { horizontalSplit: { percentage: 0.50, top: 0, bottom: 1, minSizeTop: 100, minSizeBottom: 100 } },
          right: { horizontalSplit: { percentage: 0.50, top: 2, bottom: 3, minSizeTop: 100, minSizeBottom: 100 } },
        },
      },
    );

    const myContentGroup: ContentGroup = new ContentGroup(
      {
        contents: [
          {
            classId: "UiFramework.IModelViewportControl",
            applicationData: { label: "Content 1a", bgColor: "black" },
          },
          {
            classId: TreeExampleContentControl,
            applicationData: { label: "Content 2a", bgColor: "black" },
          },
          {
            classId: "TestApp.IModelViewport",
            applicationData: { label: "Content 3a", bgColor: "black" },
          },
          {
            classId: HorizontalPropertyGridContentControl,

public get frontstage(): React.ReactElement {

    const myContentGroup: ContentGroup = new ContentGroup(
      {
        contents: [
          {
            classId: "ScheduleAnimationControl",
          },
        ],
      },
    );

    return (

public get frontstage(): React.ReactElement {
    const myContentGroup: ContentGroup = new ContentGroup(
      {
        contents: [
          {
            classId: "ScheduleAnimationControl",
          },
        ],
      },
    );

    return (

public get frontstage(): React.ReactElement {
    const contentGroup: ContentGroup = new ContentGroup({
      contents: [
        {
          classId: SignInControl,
        },
      ],
    });

    return (
      
    );
  }

public get frontstage(): React.ReactElement {
    const contentGroup: ContentGroup = new ContentGroup({
      contents: [
        {
          classId: LocalFileOpenControl,
        },
      ],
    });

    return (

public get frontstage(): React.ReactElement {
    const contentGroup: ContentGroup = new ContentGroup({
      contents: [
        {
          classId: IModelIndexControl,
        },
      ],
    });

    return (
      
    );
  }

public get frontstage(): React.ReactElement {
    const myContentGroup: ContentGroup = new ContentGroup(
      {
        contents: [
          {
            classId: "CubeContent",
          },
        ],
      },
    );

    return (

public get frontstage(): React.ReactElement {
    const contentGroup: ContentGroup = new ContentGroup({
      contents: [
        {
          classId: IModelOpenControl,
        },
      ],
    });

    return (
      
    );
  }