Three.js create n meshes to form a smooth 90 degree donut

I am trying to find an algorithm to have the following generated in Three.js.
Expected outcome (Pardon my drawing skills)
The amount of meshes to form the 90 degree donut, the thickness and the padding between them should be variable.

I know that you can create something like that with the TorusGeometry setting the radial segments to 2 and reducing the arc along the lines of:

const geometry = new THREE.TorusGeometry( 10, 3, 2, 100 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

But this does not work because as seen in my expected outcome, I need seperate meshes. So I researched further and encountered the ShapeGeometry. I think the way to go is with ShapeGeometry.

const generateArc = (padding, thickness, count) => {
     const arcShape = new THREE.Shape()
        .moveTo( 50, 10 )
        .absarc( 10, 10, 40, 0, Math.PI * 2, false );
}

But I can’t figure out how to do the correct math to generate these seperate mesh arcs around.
Is my approach with ShapeGeometry the right one? and if so how do I generate the right meshes with the Shape geometries.