JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="photo_container rounded-full">
    <label for="somefile">
      <div
        class="preview_photo responsive rounded-full"
      ></div>
      <!-- :style="{ 'background-image': 'url(http://dkacademy2021.loc/' + imagePath  + ')' }" -->
    </label>
  <input
      type="file"
      name="somefile"
      id="somefile"
    /> 
     <input
      type="date"
      name="somedate"
      id="somedate"
    />
  </div>
  <div class="photo_container rounded-full">
    <label for="somedate">
     <div
        class="preview_photo responsive rounded-full"
      ></div>
    </label>
     <input
      type="date"
      name="somedate"
      id="somedate"
    />
  </div>

CSS

input[type="date"] {
  position: absolute;
  left: -9999px; /*обычно делаю display none, но тут для поиска find элемент нужен в DOM */
}
input[type="file"] {
  position: absolute;
  left: -9999px; /*обычно делаю display none, но тут для поиска find элемент нужен в DOM */
}
.photo_container > label {
  /* display: block; */
  width: 50%;
  margin: auto;
  overflow: hidden;
  cursor: pointer;
}

.photo_container > label[for*="somefile"] {
  border-radius: 50%;
  width: 30%;
}
.photo_container > label[for*="somedate"] {
  border-radius: 50%;
  width: 30%;
}
.preview_photo {
  float: left;
  /* outline: 3px solid red; */
  padding-bottom: 50%;
  float: left;

  width: 100%;
  /*height: 100%;*/

  background: #e74c3c;
  /*background-image: url(../images/load_photo.png);*/
  background-size: cover;
  background-position: center;
}