JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="0" height="0" class="svg-visiblity">
			<defs>
				<path id="hex" d="M11.5,20.9L44.3,2c3.7-2.2,8.3-2.2,12.1,0l32.8,18.9c3.7,2.2,6,6.1,6,10.4v37.8c0,4.3-2.3,8.3-6,10.4 L56.3,98.4c-3.7,2.2-8.3,2.2-12.1,0L11.5,79.5c-3.7-2.2-6-6.1-6-10.4V31.3C5.4,27,7.7,23,11.5,20.9z"/>
				<clipPath id="hex-clip-200">
                    <use xlink:href="#hex" transform="scale(2 2)" />
                </clipPath>
			</defs>
		</svg>
<svg class="image-200-2">
						<rect class="border" width="100%" height="100%" transform="scale(1.02)" style="clip-path: url(#hex-clip-200);" /></rect>
						<image xlink:href="http://placehold.it/200x200" width="200" height="200" transform="translate(2 2)" style="clip-path: url(#hex-clip-200);"></image>
					</svg>

CSS

.image-200-2 {
  display: inline-block;
  height: 205px;
  width: 205px;
}
.image-200-2 .border {
  fill: rgba(0, 0, 0, 0.5);
}
.svg-visiblity {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}