Arranging rectangles in a circle with equal distance

I'm writing a program that renders mind maps. So far, I've succeeded in drawing the root node and the first level of child nodes around it, in a circle.

This is the code that renders the mind map nodes:

const root = data.find((node) => node.parent === undefined);
const level1 = data.filter((node) => node.parent === root.id);
root.x = 0;
root.y = 0;
root.level = 0;
await addMindMapNode(scene, root);
const radius = 2;
const slice = (2 * Math.PI) / level1.length;
for (let i = 0; i < level1.length; i++) {
    const level1node = level1[i];
    level1node.level = 1;
    const angle = slice * i;
    const x = root.x + radius * Math.cos(angle);
    const y = root.y + radius * Math.sin(angle);
    level1node.x = x;
    level1node.y = y;
    await addMindMapNode(scene, level1node);
}

You can find the whole program on CodeSandbox.

The output looks like this (with different number of child nodes, from 1 child to 9 children):

As you can see, depending on the number of child nodes, the distribution of the child nodes around the root node in the center looks more or less uneven and not pleasing to the eye, especially with 3, 7 or 9 child nodes.

This is because of the rectangular format of the child node boxes. The center points of the boxes have the exact same distance between them, but the length of the distance (shown as red line segments below) is different, depending on position:

I have to find a way to make it so that the red circle sections are equal in size.

So my question is:

How can I calculate the angle at which to render each purple box so that the distance between each box looks to be the same (i.e. take into account the width and height of each box)?