Fabric.js - How to add Grouping and Ungrouping in FabricJS Angular?

Question

We are trying to develop a tool based upon fabric JS. Our issue is, we cannot group and ungroup the images in the Canvas. The fabric version we are using is ^4.3.1. We went through these documents Fabric.js - How to set values for Multiple Active Object? , but we are not getting any result.

Relevant codes are given below,

GroupAll : While clicking this above Group all button, this thing fires which groups all active elements selected.

  groupAll(){
    if (!this.canvas.getActiveObject()) {
      return;
    }
    if (this.canvas.getActiveObject().type !== 'activeSelection') {
      return;
    }
    this.canvas.getActiveObject().group; // this.canvas.getActiveObject().toGroup() is not working
    this.canvas.requestRenderAll();
  }
}

**Code for Selection **

 mouseMove(e: Event) {    
    if (!this._isMouseDown) {
      return;
    }
    const pointer = this.canvas.getPointer(e);
    switch (this._selectedTool) {
      case DrawingTools.ELLIPSE:
        this.fabricShapeService.formEllipse(
          this._elementUnderDrawing as CustomFabricEllipse,
          this._initPositionOfElement,
          pointer,
        );
        break;
     
      case DrawingTools.LINE:
      case DrawingTools.DASHED_LINE:
        this.fabricShapeService.formLine(this._elementUnderDrawing as CustomFabricLine, pointer);
        break;
     // This below code is used for Selection, Is there any error here???
          case DrawingTools.SELECT: 
            this.canvas.discardActiveObject();
            var sel = null;
            sel=new fabric.ActiveSelection(this.canvas.getObjects(), {
              canvas: this.canvas,
            });
            this.canvas.setActiveObject(sel);
            // this.canvas.requestRenderAll();
          break;
    }   
  }

What we are missing, Kindly help us with relevant documentation.