How do I a multiselect programatically in fabric.js? - fabricjs

Question

I'm trying to select a few fabric.js objects so I can manipulate them together.
First I load an SVG file as a fabric group.
Second I click on the button to filter objects and "select" objects that I want to make the 'active selection out of.
In this example, you can see the bounding box is not where you'd expect it to be. This is causing some issues in my app.
I've seen in the 'gotchas' about setCoords() and I'm not sure if this is related to that or how it would apply here since I haven't moved anything in the group x,y.
This example codepen an attempt to show a simple example.
https://codepen.io/bencbaumann/pen/PodoeXq?editors=1010
html
<button id="multiselect">Multi Select</button>
<canvas id="canvas">
js
const canvas = new fabric.Canvas("canvas", {
height: 500,
width: 500
});
var url = "https://assets.codepen.io/496640/dots3.svg";
fabric.loadSVGFromURL(url, function (objects, options) {
const svgObj = fabric.util.groupSVGElements(objects, options);
canvas.add(svgObj);
canvas.renderAll();
});
function selectObjectsByIds({ canvas, ids }) {
console.log("ids", ids); // show [ids] that we are trying to select
const objects = canvas.getObjects(); // get objects in canvas
console.log("objects.length:", objects.length);
console.log("objs:", objects);
const objectsWithId = objects.filter((o) => o.id);
const objectsWithChildren = objects.filter((o) => o._objects);
const childrenWithId = objectsWithChildren
.map((o) => o._objects)
.flat()
.filter((o) => o.id);
const selected_ids = [...objectsWithId, ...childrenWithId];
console.log(selected_ids)
const selectedObjects = selected_ids.filter((o) => ids.includes(o.id));
canvas.discardActiveObject();
console.log('selectedObjects: ', selectedObjects)
var sel = new fabric.ActiveSelection(selectedObjects, {
canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
}
var $ = function(id){return document.getElementById(id)};
var multiselect = $('multiselect')
multiselect.onclick = () => selectObjectsByIds({canvas, ids: ['dot']})
the bounding box is not where it should be. I expect the bounding box to be around the objects in my selection.
The 3 green dots have the id of 'dot'