Why css `-webkit-mask-box-image` is not applying after adding overflow:hidden to its parent?

I am trying to achieve linear blur on a card as shown in the following

linear-blur is applied with the following CSS properties

.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}

After adding overflow:hidden; -webkit-mask-box-image property is not applying, any reason for this weird behaviour?

.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow:hidden;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}

The blur is not masking as shown in the below

you can find the source code here: https://codesandbox.io/s/linear-blur-issue-vdjw7?file=/src/styles.css