Using compound bodies with Bodies.fromVertices does not work it just shows a filled in shape.

[404UsernameNotFound404]

Using compound bodies with Bodies.fromVertices does not work it just shows a filled in shape.

the set of vertices is:
{ x: 0.454546, y: 70 },
{ x: 0.454546, y: 0.181816 },
{ x: 42.5909, y: 0.181816 },
{ x: 42.5909, y: 7.68182 },
{ x: 8.90909, y: 7.68182 },
{ x: 8.90909, y: 31.2727 },
{ x: 40.4091, y: 31.2727 },
{ x: 40.4091, y: 38.7727 },
{ x: 8.90909, y: 38.7727 },
{ x: 8.90909, y: 62.5 },
{ x: 43.1364, y: 62.5 },
{ x: 43.1364, y: 70 }

But I have tested lots of different vertices sets

code (ignore normalLetterBody and bubbleBody):
```
const root = await loadSvg(images[imageIndex]);
const vertexBubbleSets = select(root, "path").map((path) => {
return Vertices.scale(Svg.pathToVertices(path, 5), 1.25, 1.25)
});
const vertexSets = select(root, "path").map((path) => {
return Svg.pathToVertices(path, 5);
});
console.log(vertexSets);
const normalLetterBody = Bodies.fromVertices(
xLocation,
120,
vertexSets, // coordinates
{
render: {
fillStyle: "red",
strokeStyle: "blue",
lineWidth: 1
},
restitution: parseFloat(restitution),
density: parseFloat(density),
friction: parseFloat(friction),
},
true,
);
const bubbleBody = Bodies.fromVertices(
xLocation,
120,
vertexBubbleSets, // coordinates
{
render: {
fillStyle: "transparent",
strokeStyle: "red",
lineWidth: 1,
},
restitution: parseFloat(restitution),
density: parseFloat(density),
friction: parseFloat(friction),
},
false,
)
const compoundBody = Body.create({
parts: [Bodies.fromVertices(
xLocation,
120,
vertexSets, // coordinates
{
render: {
fillStyle: "red",
strokeStyle: "blue",
lineWidth: 1
},
restitution: parseFloat(restitution),
density: parseFloat(density),
friction: parseFloat(friction),
},
true,
)],
});
Composite.add(
physicsRunner.engine.world,
compoundBody
);

[404UsernameNotFound404]

I think the issue comes from Render.bodies where there needs to be recursion for rendering the body parts. As a body part can have parts