Cannon body overlapping, want them to stack on top of each other

Question

I have created three js textgeometry and created body using cannonjs. also using cannon-es-debugger see img.

problem is that, two text overlapping I want them to stack on top of each other realistically.

here's some code:

// threejs text mesh
this.geometry = this.setGeometry(text);
this.material = this.setMaterial();
this.textMesh = new THREE.Mesh(this.geometry, this.material);
this.textMesh.castShadow = true;
this.textMesh.position.x += 1;
this.textMesh.position.z += 1;
this.textMesh.position.y = 2;
this.textMesh.geometry.center();
this.scene.add(this.textMesh);

// physics for textgeometry
const vertices = [...this.geometry.getAttribute('position').array];
const faces = [];
for (let i = 0; i < vertices.length / 3; i += 3) {
    faces.push(i, i + 1, i + 2);
}

const shape = new CANNON.Trimesh(vertices, faces);
const phyBody = new CANNON.Body({
    mass: 100,
    shape,
});
phyBody.position.copy(this.textMesh.position);
phyBody.quaternion.copy(this.textMesh.quaternion);
phyWorld.addBody(phyBody);

some setup:

world.gravity.set(0, -9.82, 0);
//and updating physics world in requestanimationframe as below:
world.step(1 / 60, time.deltaTime, 3)