Hide SVG or Image behind border

Question

I have the following problem. I have created an Hexagon that has a coloured border and I would like to place an image or SVG inside the hexagon, and the problem is that I cant figure out how to make the image not go on top of the borders.

.App {
  background: black;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.gridComponent {
  margin-top: 35px;
  display: grid;
  justify-content: center;
  gap: 2rem;
}

.hexagon {
  position: relative;
  height: 600px;
  width: 339px;
  background: rgb(89, 90, 145);
}

.hexagon:before {
  position: absolute;
  content: "";
  top: 10px;
  left: 10px;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  background: #1e40af;
  overflow: hidden;
}

.hexagon,
.hexagon:before {
  -webkit-clip-path: polygon(50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%, 0 10%);
  clip-path: polygon(50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%, 0 10%);
}

.topContainer {
  position: relative;
  width: 339px;
  height: 300px;
}

.topContainer:before {
  position: absolute;
  content: "";
  top: 10px;
  left: 10px;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  background: green;
}

.topContainer,
.topContainer:before {
  -webkit-clip-path: polygon( 50% 0, 100% 20%, 100% 100%, 50% 100%, 0 100%, 0 20%);
  clip-path: polygon(50% 0, 100% 20%, 100% 100%, 50% 100%, 0 100%, 0 20%);
}

.logoVitality {
  position: absolute;
  width: 212.06px;
  height: 257.19px;
  top: 1%;
  right: 69%;
  overflow: hidden;
}

.anon{
position:absolute;}

.divider {
  position: absolute;
  width: 339px;
  height: 10px;
  top: 289.5px;
  background: black;
}

.bottomContainer {
  position: relative;
  width: 339px;
  height: 300px;
}

.bottomContainer:before {
  position: absolute;
  content: "";
}

.bottomContainer,
.bottomContainer:before {
  -webkit-clip-path: polygon(50% 100%, 100% 81%, 100% 0, 50% 0, 0 0, 0 81%);
  clip-path: polygon(50% 100%, 100% 81%, 100% 0, 50% 0, 0 0, 0 81%);
}

.bottomContainer:before {
  top: 0px;
  left: 10px;
  height: calc(100% - 10px);
  width: calc(100% - 20px);
  background: grey;
}

     <div class="App">
          <div class="gridComponent">
            <div class="hexagon">
              <div class="topContainer">
              </div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/640px-NewTux.svg.png"class="logoVitality"/>
              <div class="divider"></div>

              <div class="bottomContainer"></div>
            </div>
          </div>
        </div>

I have this codesandbox where you can see the issue. https://codesandbox.io/s/focused-hooks-19rrjj?file=/src/styles.css and I would like to get the image that is outside of the hexagon to be behind the border, I but just could not find a solution. I tried using z-index and playing around with the positions, but I could not figure out.

Thank you for your help!