Please check the below code to implement your required design for menu in react.

Here is my code:

export default function App() {
  const menuItem = [
    { i: 0, name: 'Home', link: '/' },
    { i: 1, name: 'about', link: '/' },
    { i: 2, name: 'services', link: '/' },
    { i: 3, name: 'contact', link: '/' },
    { i: 4, name: 'team', link: '/' },
  ];
  const [selected, setSelected] = useState(null);
  const item = document.querySelectorAll('ul li a');
  function indicator(index) {
    setSelected(index)
  }

  const renderMenu = menuItem.map((item, i) => {
    return (
      <ul>
        <li>
          <a href="/" className={selected==i ? 'isSelected':'menulist'} onMouseMove={(e) => indicator(i)}>
            {item.name}
          </a>
        </li>
      </ul>
    );
  });
  return <div className="App">{renderMenu}</div>;
}

.CSS

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
}
ul {
  position: relative;
}
ul li {
  list-style: none;
  font-size: 2rem;
}
ul li a {
  position: relative;
  text-decoration: none;
  padding: 0 1rem;
  color: white;
}
.isSelected {
  height: 4rem;
  top: 0;
  background-color: #2196f3;
  transition: 0.5s ease;
}

You can put any required hover CSS in the isSelected class and it will work like a charm.

Here is my code demo link: https://stackblitz.com/edit/react-mewmxh?file=src%2Fstyle.css

So I was able to replicate that by using this function:

  let item;
  let marker;
  const indicator = (e) => {
    marker.style.top = e.offsetTop + "px";
    marker.style.width = e.offsetWidth + "px";
  };
  const getelements = () => {
    item = document.querySelectorAll("ul li a");
    marker = document.querySelector("#marker");
  };
  const fun = () => {   //Feel free to name whatever you want
    if (item === undefined || marker === undefined) {
      getelements();
    }
    if (item !== undefined && marker !== undefined) {
      item.forEach((link) => {
        link.addEventListener("mousemove", (e) => {
          indicator(e.target);
        });
      });
    }
  };

And the eventlistener:

<ul>
        <div id="marker"></div>
        <li>
          <a href="/" onMouseOver={() => fun()}>Home</a>
        </li>
        <li>
          <a href="/" onMouseOver={() => fun()}>about</a>
        </li>
        <li>
          <a href="/" onMouseOver={() => fun()}>services</a>
        </li>
        <li>
          <a href="/" onMouseOver={() => fun()}>contact</a>
        </li>
        <li>
          <a href="/" onMouseOver={() => fun()}>team</a>
        </li>
      </ul>

I'm using onMouseOver instead of onMouseMove as it was causing some jitters.