threejs transparent material blending

Question

Blending multiple transparent meshes causes strange behavior: only the first mesh is drawn, the inner meshes are hidden at the intersection. This only happens within a certain camera angle range. Can is be fixed? Why does this only happen at certain angles?
Tested with r142 and r143. Browser Chrome 104.0.5112.81.

Partially expected behaviour:

Strange blending:

Expected behaviour:

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three@0.142.0/build/three.module.js",
        "OrbitControls": "https://unpkg.com/three@0.142.0/examples/jsm/controls/OrbitControls.js"
    }
}
</script>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "OrbitControls";

/* -- */

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);

const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);

const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
camera.position.set(0, 0, 5);
const controls = new OrbitControls(camera, renderer.domElement);

/* -- */

const length = 7;
const points = [
    new THREE.Vector3(0, -length / 2, 0),
    new THREE.Vector3(0, length / 2, 0)
];
const curve = new THREE.CatmullRomCurve3(points);

const createMeshOnScene = (scene, geometry, material, position) => {
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.copy(position);
    scene.add(mesh);
    return mesh;
};
const transparentMaterial = (color) => {
    return new THREE.MeshStandardMaterial({
        color: color,
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.6,
        metalness: 0,
        roughness: 1
    });
};
const opaqueMaterial = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    metalness: 0,
    roughness: 1
});

createMeshOnScene(
    scene,
    new THREE.TubeGeometry(curve, 2, 0.2, 16),
    opaqueMaterial,
    new THREE.Vector3(0, -0.4, 0)
);
createMeshOnScene(
    scene,
    new THREE.ConeGeometry(2, 2, 4, 1, true, 0, Math.PI * 1.6),
    transparentMaterial(0xaa0000),
    new THREE.Vector3(0, 0, 0)
);
createMeshOnScene(
    scene,
    new THREE.ConeGeometry(2, 2, 4, 1, true, 0, Math.PI * 1.6),
    transparentMaterial(0xaaaa00),
    new THREE.Vector3(0, -0.3, 0)
);
createMeshOnScene(
    scene,
    new THREE.ConeGeometry(2, 2, 4, 1, true, 0, Math.PI * 1.6),
    transparentMaterial(0x00aa00),
    new THREE.Vector3(0, -0.6, 0)
);
createMeshOnScene(
    scene,
    new THREE.ConeGeometry(2, 2, 4, 1, true, 0, Math.PI * 1.6),
    transparentMaterial(0x00aaaa),
    new THREE.Vector3(0, -0.9, 0)
);

/* -- */

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

/* -- */

window.addEventListener("resize", resize);
function resize() {
    let width = window.innerWidth;
    let height = window.innerHeight;
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
}
resize();

</script>