transparent object make behind object NOT render at certain camera position - three.js

Question

I am using three.js with transparent objects. For some camera positions, the object which is behind transparent object will NOT be rendered.
Please see video: https://streamable.com/bneg94
To reproduce this, you can use https://threejs.org/editor/, then load attached scene below
{
"metadata": {
"version": 4.5,
"type": "Object",
"generator": "Object3D.toJSON"
},
"geometries": [
{
"uuid": "262dc10a-2eee-41f8-a4c1-4060f291e461",
"type": "BoxGeometry",
"width": 2.95,
"height": 0.02,
"depth": 0.45,
"widthSegments": 1,
"heightSegments": 1,
"depthSegments": 1
},
{
"uuid": "14ba553a-8a8f-4c85-b71e-88a3917928ef",
"type": "BoxGeometry",
"width": 0.2,
"height": 0.2,
"depth": 0.1,
"widthSegments": 1,
"heightSegments": 1,
"depthSegments": 1
}],
"materials": [
{
"uuid": "531c47ff-b7b7-4614-8cf1-b50dbaab12c4",
"type": "MeshStandardMaterial",
"color": 9713720,
"roughness": 1,
"metalness": 0,
"emissive": 0,
"envMapIntensity": 1,
"opacity": 0.6,
"transparent": true,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"colorWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680
},
{
"uuid": "d942bed5-0292-4fb3-aa5d-48d3a997dcb5",
"type": "MeshStandardMaterial",
"color": 13311,
"roughness": 1,
"metalness": 0,
"emissive": 0,
"envMapIntensity": 1,
"opacity": 0.5,
"transparent": true,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"colorWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680
}],
"object": {
"uuid": "8C69EB3B-5F72-463E-84DF-83C737DD9A62",
"type": "Scene",
"name": "Scene",
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
"children": [
{
"uuid": "A816D365-2535-471E-8DE8-EA3C806770E2",
"type": "AmbientLight",
"name": "AmbientLight",
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
"color": 16777215,
"intensity": 0.7
},
{
"uuid": "681f9f5d-2016-4bc6-889d-e01f95311a13",
"type": "DirectionalLight",
"name": "DirectionalLight",
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,5,10,7.5,1],
"color": 16777215,
"intensity": 0.3,
"shadow": {
"camera": {
"uuid": "8d51b8c9-b41e-4472-8d0e-b9bc2ef87ad9",
"type": "OrthographicCamera",
"layers": 1,
"zoom": 1,
"left": -5,
"right": 5,
"top": 5,
"bottom": -5,
"near": 0.5,
"far": 500
}
}
},
{
"uuid": "7ec021f6-ff2c-4bb2-8b14-7e62b602638b",
"type": "Mesh",
"name": "Box",
"frustumCulled": false,
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0.5,0.73,-0.25,1],
"geometry": "262dc10a-2eee-41f8-a4c1-4060f291e461",
"material": "531c47ff-b7b7-4614-8cf1-b50dbaab12c4"
},
{
"uuid": "b2d4bf3f-b3f0-4dd3-aabe-a0b9ecfc621c",
"type": "Mesh",
"name": "Box",
"frustumCulled": false,
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0.6,0.6,-0.15,1],
"geometry": "14ba553a-8a8f-4c85-b71e-88a3917928ef",
"material": "d942bed5-0292-4fb3-aa5d-48d3a997dcb5"
}]
}
}
I searched for solution but all of them can NOT be used. For example, when setting material depthWrite = false, at some certain camera angle, the color is NOT multiplied: https://streamable.com/dbmslo
Do you know any solution to fix this problem?
Thank you for your reading.