How to use the fabric.fabric.Group function in fabric

const packageVersionText = new fabric.Text(version, {
    fontFamily: 'Source Code Pro',
    fontSize: 35,
    fill: selectedTheme.versionColor,
    opacity: selectedTheme.versionOpacity,
    left: packageNameText.width + packageAtText.width + +pad * 4,
    top: 28,
  })

  // packageVersionText.top =
  //   packageNameText.top +
  //   (packageNameText.height - packageVersionText.height) / 2 +
  //   pad / 2

  const packageNameGroup = new fabric.Group(
    [packageNameText, packageAtText, packageVersionText],
    { selectable: false, /* top: 91 / 2, originY: 'center'*/ },
  )

  // const packageNameGroup = new fabric.Group(
  //   [packageNameText, packageAtText, packageVersionText],
  //   { selectable: false, /* top: 91 / 2, originY: 'center'*/ },
  // )

  function createStatGroup(number, unit, label, opts) {
    const numberText = new fabric.Text(number.toString(), {
      fontFamily: 'SF Compact Text',
      fontSize: 55,
      fill: selectedTheme.numberColor,
      fontWeight: 'bold',
      opacity: selectedTheme.numberOpacity,

beforeEach(() => {
            object = new fabric.Object();
            object2 = new fabric.Object();
            group = new fabric.Group();

            graphics.add(object);
            graphics.add(object2);
            graphics.add(group);
            group.add(object, object2);
        });

})

    unitText.top = numberText.top + numberText.height - unitText.height - pad

    const labelText = new fabric.Text(label, {
      fontFamily: 'SF Compact Text',
      fontSize: 25,
      fontWeight: 100,
      fill: selectedTheme.labelColor,
      opacity: selectedTheme.labelOpacity,
      top: numberText.height,
      left: (numberText.width + unitText.width) / 2,
      originX: 'center',
    })

    return new fabric.Group([numberText, unitText, labelText], opts)
  }

doMouseUp(o) {
    this.isDown = false;
    let canvas = this._canvas;

    canvas.remove(this.line);
    canvas.remove(this.head);
    let arrow = new fabric.Group([this.line, this.head]);
    canvas.add(arrow);
  }

export default function newScaleBar(left, top, scaleX) {
  const l1 = makeLine([100, 100, 200, 100]);
  const l2 = makeLine([100, 90, 100, 110]);
  const l3 = makeLine([200, 90, 200, 110]);

  const group = new fabric.Group([l1, l2, l3], {
    left,
    top,
    scaleX,
    hasRotatingPoint: false,
    hasBorders: false
  });

  group.setControlsVisibility({
    tl: false,
    tr: false,
    bl: false,
    br: false,
    mt: false,
    mb: false
  });

originX: 'center',
      strokeWidth: 2,
      top: 50,
      left: 0,
    });

    let line2 = new fabric.Line(deepcopy(linePts), {
      stroke: 'white',
      strokeWidth: 2,
      originX: 'center',
      angle: -60,
      top: 28,
      left: 35,
    });

    let group1 = new fabric.Group([hexagon3, line1, line2], {
      left: 490,
      top: 400,
      originX: 'center',
      originY: 'center',
    });
    page.add(hexagon1, hexagon2, hexagon4, hexagon5, hexagon6, group1);

    setTimeout(() => {
      hexagon1.animate('angle', 360, {
        duration: 1500,
        onChange: page.renderAll.bind(page),
        onComplete: () => {
          hexa2In();
        }
      });
    });

const generateLine = () => {
      cv.remove(heightGroup);
      heightGroup = new fabric.Group([
        new fabric.Line([cv.width - 15, cv.height, cv.width - 15, cv.height - Utils.toPixelsSize(pile.getHeight())], {
          strokeWidth: 2,
          stroke: 'black',
        }),
        new fabric.Line([cv.width - 25, cv.height - Utils.toPixelsSize(pile.getHeight()), cv.width - 5, cv.height - Utils.toPixelsSize(pile.getHeight())], {
          strokeWidth: 2,
          stroke: 'black',
        }),
        new fabric.Line([cv.width - 25, cv.height - 2, cv.width - 5, cv.height - 2], {
          strokeWidth: 2,
          stroke: 'black',
        }),
        new fabric.Text(Utils.toPixelsSize(pile.getHeight()) + 'px', {
          fontFamily: 'Arial',
          fontSize: 25,
          left: cv.width - 90,