React How to add on hover border for <area> tag

Question

Currently I have image map on that I am plotting Area

Ex.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

once we hover the area how to add border around it.

following code works fine in Javascript but how can I do that in React.

How to put border on <area>?

var areas = document.getElementsByTagName( 'area' );
for( var index = 0; index < areas.length; index++ ) {    
    areas[index].addEventListener( 'mouseover', function () {this.focus();}, false );
    areas[index].addEventListener( 'mouseout', function () {this.blur();}, false );
};

Answer 1

you can write your js codes before return. And here`s a example for you

import React, { useEffect } from "react";

export default function Header() {
  useEffect(() => {
    function myFunction() {
      var areas = document.getElementsByTagName("area");
      for (var index = 0; index < areas.length; index++) {
        areas[index].addEventListener(
          "mouseover",
          function () {
            this.focus();
          },
          false
        );
        areas[index].addEventListener(
          "mouseout",
          function () {
            this.blur();
          },
          false
        );
      }
    }
    myFunction();
  }, []);

  return (
    <div>
      <img
        alt="img"
        id="map"
        src="http://thinkingstiff.com/images/matt.jpg"
        usemap="#map"
      />
      <map name="map">
        <area alt="area" shape="circle" coords="50,50,50" href="#" />
        <area alt="area" shape="circle" coords="100,100,50" href="#" />
      </map>
    </div>
  );
}