I have implemented this wavy line animation and it works fine, but the problem is that I must convert it to React. I'm pretty new to React, should I use "useState" and "useEffect"?

Here's the code:

let xs = []
for (var i = 0; i < 300; i++) {
  xs.push(i)
}

let t = 0

function animate() {

  let points = xs.map(x => {
   let y = 200 + 8 * Math.sin((x + t) /5)
    
    return [x, y]
  })

  let path = "M" + points.map(p => {
    return p[0] + "," + p[1]
  }).join(" L")

  document.querySelector("path").setAttribute("d", path)

  t += 0.5

  requestAnimationFrame(animate)
}

animate()


<div className="Startpage">
 <svg>
  <path d="M10,10 L50,100 L90,50"></path>
 </svg>
</div>