How to give shadow on the inside of a clip-path

Question

I'm trying to give shadow on the inside of the hexagon that I created through clip-path. (More like an inset of box-shadow)

I'm using a clip-path to make a hexagon, so I can't use box-shadow to create a shadow on it because any shadow I apply to it will be clipped too.

For that, I'm using a drop-shadow on the parent element to have the shadow on the hexagon. But the thing is I want those shadows to be inset. Like on the inside of the hexagon.

So, my question is, Is there any way to give inset on drop-shadow? If not then what would be the appropriate way to achieve this.

JSfiddle: https://jsfiddle.net/61xwqh4L/4/

I want the shadow to be like: https://i.postimg.cc/k4vQmLmf/Microsoft-Teams-image.jpg

.home {
  width: 100%;
  height: 85vh;
  background-color: rgb(123, 158, 158);
}

.hex-container {
  height: 100%;
  max-height: 100vh;
  max-width: 60%;
  margin: 0px auto;
  aspect-ratio: 6 / 2;
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-template-rows: repeat(2, auto);
  filter: drop-shadow(0px 0px 10px rgba(247, 247, 247, 0.9));
  justify-content: center;
  grid-gap: 2px;
}

.hexagon {
  z-index: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: .5s;
  position: relative;
}

.hex-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  text-align: center;
  width: 100%;
}

.hexagon:first-child {
  grid-row-start: 1;
  grid-column: 1 / span 2;
  background-color: #003366;
  color: #fff;
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

.hexagon:nth-child(2) {
  grid-row-start: 1;
  grid-column: 3 / span 2;
  background-color: #87cefa;
  color: #fff;
  animation: 1s ease-out 0s 1 slideInFromTop;
}

.hexagon:nth-child(3) {
  grid-row-start: 1;
  grid-column: 5 / span 2;
  background-color: #f5f5f5;
  color: #003366;
  animation: 1s ease-out 0s 1 slideInFromRight;
}

.hexagon:nth-child(4) {
  grid-row-start: 2;
  grid-column: 2 / span 2;
  background-color: #f5f5f5;
  color: #003366;
  position: relative;
  top: -25%;
  animation: 2s ease-out 0s 1 slideInFromLeft;
}

.hexagon:nth-child(5) {
  grid-row-start: 2;
  grid-column: 4 / span 2;
  background-color: #003366;
  color: #fff;
  position: relative;
  top: -25%;
  animation: 2s ease-out 0s 1 slideInFromRight;
}

<div class="home">
  <div class="hex-container">
    <a href="#" onclick="return false;" class="hexagon">
      <div class="hex-text">
        <p>Drug Names</p>
      </div>
    </a>
    <a href="#" onclick="return false;" class="hexagon">
      <div class="hex-text">
        <p>Clinical Trials</p>
      </div>
    </a>
    <a href="#" onclick="return false;" class="hexagon">
      <div class="hex-text">
        <p>Indication Group</p>
      </div>
    </a>
    <a href="pages/ManufacturerMap/index.html" class="hexagon">
      <div class="hex-text">
        <p>Manufacturer Map</p>
      </div>
    </a>
    <a href="#" onclick="return false;" class="hexagon">
      <div class="hex-text">
        <p>Disease Name</p>
      </div>
    </a>
  </div>
</div>

Please any help would be appreciated.