Group/ungroup fabricjs objects

Question

Tried a bunch of different demos and snippets from stackoverflow, and cannot get this to work. Trying to add a simple group/ungroup button. Have run into a bunch of different snags along the way, but the main reoccurring issue is after the ungroup, all the objects from the group are hidden, unless u select an item, then that item is visible.

Here's a simplified version of my many attempts at this

<template>
  <button @click="toggleGroup" class="flex w-full h-full justify-center items-center">
    <Icon :name="isGroupMode ? 'mdi:group' : 'mdi:dots-horizontal'" size="16" />
  </button>
</template>

<script setup lang="ts">
import { useCanvasStore } from "@/stores/canvasStore";
const { $fabric } = useNuxtApp();

const canvasStore = useCanvasStore();

const isGroupMode = ref(true);

const toggleGroup = (): void => {
  const canvas = canvasStore.canvas;
  if (!canvas) return

  const activeObject = canvas.getActiveObject();

  if (isGroupMode.value) {
    const selectedObjects = canvas.getActiveObjects();
    if (selectedObjects && selectedObjects.length > 1) {
      const group = new $fabric.Group(selectedObjects);

      canvas.discardActiveObject();
      selectedObjects.forEach((obj) => canvas.remove(obj));
      canvas.add(group);
      canvas.setActiveObject(group);
      canvas.renderAll();
      isGroupMode.value = false;
    }

  } 
  else {

    // Ungrouping logic
    if (activeObject && activeObject.type === "group") {
      const items = (activeObject as any)._objects;

      canvas.remove(activeObject); // Remove the group from the canvas

      // Add each object back to the canvas with its current position
      items.forEach((item: any) => {
        canvas.add(item);
      });

      canvas.discardActiveObject();
      canvas.renderAll();
      isGroupMode.value = true;
    }

  }

};
</script>

There's no way it should be this hard? What am I misisng