कैसे एक छवि के लिए एक आधा सर्कल मुखौटा लागू करने के लिए और चींटी डिजाइन का उपयोग कर ReactJS में एक छवि के अंदर एक बटन जोड़ने के लिए?

.custom-avt {
  border-radius: 50%;
  position: relative;
  width:200px;
  height: 200px;
}

.overlay {
  position: absolute;
  top: 108px;
  width:200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}

  button {
    width:100px;
    height: 20px;
  }

<img src="https://www.w3schools.com/howto/img_avatar.png" class="custom-avt">
  <div class="overlay">
    <button>CAMERA</button>
  </div>
</img>