Child Backdrop filter not working with parent container with backdrop filter

Question

I have a child div with a style backdrop-filter: blur(10px); with a parent with a backdrop blur filter but the child background is still not blurred.

.a{
  width: 500px;
  height: 500px;
  background-image: url("https://www.unizoy.com/_next/image?url=%2Fimages%2Fmockups%2Fsony%2Fsony-3.webp&w=1920&q=75");
    object-fit:fill;
}

.b{
    width: 400px;
    height: 200px;
    backdrop-filter: blur(10px);
    position: relative;
}

.d{
  position: absolute;
  top: 150px;
  width: 400px;
  height: 300px;
  backdrop-filter: blur(10px);

}

<div class="a">
  <div class="b">
    <div class="d">
      fdsfsd
    </div>
  </div>
</div>

You will see the background of div d is still not blurred, but if the blur of b is removed, the background will blur.

does any one has any solution how to fix this.

codepen link https://codepen.io/alexadvent/pen/eYovjXv