'Instancing - See Through 3D Objects

I have been trying to instance some tree meshes in react-three-fiber and threejs, this is what i have got so far: https://codesandbox.io/s/silly-sunset-74wmt?file=/src/App.js

The trees from one angle look see through, I am able to see the barks of ALL trees. enter image description here

but the behavior is normal from the opposite angle. enter image description here

To me it seems to be some issue with render order or meshes or the shader, not able to wrap my head around it. I need the see-through thing to not happen and the set should look like how it looks like in the second picture from all angles



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source