Hide SVG or Image behind border - html

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!