can somebody help to understand why when merging the geometries of these boxes, I can't see through them correctly from some angles?

Blue are normal boxes, Orange are merged geometries. Using MeshLambertMaterial with an opacity of 0.5.

Thanks in advance

code: https://codesandbox.io/s/three-alpha-issue-bfdhk?file=/src/index.ts

screenshot:

code fragment:

// create boxes and add them to the scene (right, blue)
const boxGeo = new BoxGeometry(0.1, 0.1, 0.1);
const mat = new MeshLambertMaterial({
  transparent: true,
  opacity: 0.5,
  color: "#4469BE"
});
const boxes = [
  [   0,    0,  0.1], [   0,    0, -0.1], [   0, 0.15,  0.1], [   0, 0.15, -0.1],
  [0.15,    0,  0.1], [0.15,    0, -0.1], [0.15, 0.15,  0.1], [0.15, 0.15, -0.1]
].map((v) => {
  const box = new Mesh(boxGeo, mat);
  box.position.fromArray(v);
  box.updateMatrix();
  return box;
});
const group = new Group();
group.position.x = 0.1;
group.add(...boxes);
scene.add(group);

// merge boxes and add them to the scene (left, orange)
// issue: you can't see through some merged boxes from some angles
const geos = boxes.map((m) => m.geometry.clone().applyMatrix4(m.matrix));
const geo = BufferGeometryUtils.mergeBufferGeometries(geos);
const mergeMat = mat.clone();
mergeMat.color = new Color("#fa6900");
const merge = new Mesh(geo, mergeMat);
merge.position.x -= 0.25;
scene.add(merge);