JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!DOCTYPE HTML>
<head>
	<meta charset="UTF-8">
</head>

<body>
	<img src="https://wallpaperbrowse.com/media/images/5611472-simple-images.png" class="image" height="500px" width="500px" usemap="#simple">
	<map class="map" name="simple">
	    <area class="poly shape" coords="87,64,85,170,205,174,205,64,143,64,109,64" shape="poly">
	    <area class="circle shape" coords="419,258,123" shape="circle">
	</map>
</body>

CSS

.bw{
  filter: grayscale(100%);
}

JavaScript

$(".shape").on("mouseenter", function(evt){
	$(this).addClass("bw")
})