Implementé esta animación de línea ondulada y funciona bien, pero el problema es que debo convertirla a React. Soy bastante nuevo en React, ¿debería usar "useState" y "useEffect"?

Aquí está el código:

 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>