Any possible to make ReactWiget as BaseWidget's child in main area?

Hi, all.

I check some example code like arduino IDE, use PanelLayout can make ReactWidget as child in left panel, if use same way in main area, it’s bit weird because it will display panel title bar and context menu.

so is it possible make ReactWidget as BaseWidget’s child in main area like this?

@injectable()
export class ViewerContribution
  extends WidgetOpenHandler<ViewerWidget>
  implements CommandContribution, KeybindingContribution
{
  registerCommands(registry: CommandRegistry): void {
    registry.registerCommand(ProjectViewerCommand, {
      execute: (options: ViewerWidgetOpenerOptions) => this.openProjectView(options),
    });
  }

  async open(uri: URI, options?: ViewerWidgetOpenerOptions): Promise<ViewerWidget> {
    return super.open(uri, options);
  }

  protected openProjectView(options: ViewerWidgetOpenerOptions): void {
    this.open(new URI(''), options);
  }
  ...
}

@injectable()
export class ViewerWidget extends BaseWidget {
  static ID = 'theia-viewer';
  static LABEL = 'Viewer';
  
  protected viewsContainer!: ViewContainer;
  
  @inject(ViewerWidgetOptions) protected readonly options: ViewerWidgetOptions;
  @inject(InnerViewerWidget1) protected readonly widget1: InnerViewerWidget1;
  @inject(InnerViewerWidget2) protected readonly widget2: InnerViewerWidget2;
  
    @postConstruct()
  async init(): Promise<void> {
    this.id = ViewerWidget.ID;
    this.title.label = ViewerWidget.LABEL;
    this.title.closable = true;
	
	// how to make widget1 and widget2 as child widget in ViewerWidget?
  }
  
  onUpdateRequest = (msg: Message): void => {
    super.onUpdateRequest(msg);

    if (this.showWidget1) {
      this.widget2.hide();
	  this.widget1.show();
    } else {
	  this.widget1.hide();
	  this.widget2.show();
	}
  };
}