sliding menu hover effect in react js

https://codepen.io/shoumiksk/pen/PoJmQEN

This is the html css version of what i wanna achieve in React.

Here is my code in react:

function App() {
const marker = document.querySelector('#marker')
      const item = document.querySelectorAll('ul li a')
      function indicator(e){
        marker.style.top = e.offsetTop+'px';
        marker.style.width = e.offsetWidth+'px';
        
      }
  return (
    <div className="App">
    <ul>
      <div id="marker"></div>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>Home</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>about</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>services</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>contact</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>team</a></li>
    </ul>
    </div>
  );
}

CSS:

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

But this doesn’t work as expected, sometimes it works after refreshing it doesn’t.

I know i’m doing something wrong, any other way to do this?