How can I cast shadow from a transparent material?

I'm trying to cast shadow from a transparent material.
Here my simple code on https://glitch.com/edit/#!/elite-invented-television
As you can see the shadow of my foliage is bad (I got the shadow of the plane), how can I improve this rendering?

[edit1] A solution has been found (Thanks Piotr Adam ;), have a look to the "edited" glitch (the first one)...
[/edit1]

[edit2] Well, I try now to apply the previous trick on a chromakey material without success. Here an other glitch : https://glitch.com/edit/#!/aframe-chromakey
Any idea?
[/edit2]

Solution

Like Piotr Kolecki mentioned in his comment, one way would be to use a custom depth material.

Adapting it into an a-frame component would be simple, as You could re-use the texture loaded by the material:

// provided all is loaded:
const mesh = this.el.getObject3D("mesh");
var customDepthMaterial = new THREE.MeshDepthMaterial( {
  depthPacking: THREE.RGBADepthPacking,
  map: mesh.material.map
  alphaTest: 0.5
});
mesh.customDepthMaterial = this.customDepthMaterial;

A simple component seemed neat, so you can use this one (source) that I did just for testing. It works with .png textures, and lottie animations.

You can use it simply by adding a depth-material component to your plane:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://gftruj.github.io/webzamples/aframe/depth-material/depth-material.js"></script>
<a-scene background="color: #ECECEC">
  <a-assets>
    <img id="foliage" src="https://cdn.glitch.com/9418ac7b-9d22-4434-9511-18282652475b%2Ffoliage.png?v=1620389632977">
  </a-assets>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="8" height="8" color="#7BC8A4" shadow></a-plane>
  <a-plane position="0 1 -1.5" material="src: #foliage; side: double; transparent: true" 
           shadow depth-material>
  </a-plane>
</a-scene>