Por favor, ¿cómo puedo agregar dinámicamente un elemento html (como el intervalo) a los elementos en un componente de reacción? quiero implementar algo asi

 let text1 = '"Text one sentence.'; let text2 = 'Text two sentence'; const textElement1 = document.querySelector(".text-1"); const textElement2 = document.querySelector(".text-2"); let textSpan; function setText(t) { t == text1 ? (textElement1.innerHTML = "") : (textElement2.innerHTML = ""); t.split("").map((x) => { let charElement = document.createElement("span"); let charNode = document.createTextNode(x); charElement.appendChild(charNode); t == text1 ? textElement1.appendChild(charElement) : textElement2.appendChild(charElement); }); textSpan = document.querySelectorAll("span"); } function setFontWeight() { textSpan.forEach((element) => { let position = element.getBoundingClientRect(); // Calculate The Distance Between Cursor And Target Elements let distance = Math.ceil( Math.sqrt((position.x - pointerX) ** 2 + (position.y - pointerY) ** 2) ); // The Longer The Distance The Lower The Font Weight element.setAttribute( "style", `font-variation-settings: 'wght' ${900 - distance * 2};` ); }); }

Este es el componente de reacción que he creado.

 function TopSidePane(){ return( <div onMouseMove={(e)=>Hover(e)} className="top-side-pane"> <div className="text-container"> <h1 className="text-1">{text1}</h1> <h1 className="text-2"> {text2}</h1> </div> <div className="custom-pointer" ></div> </div> ); }

Cada vez que hay un movimiento del mouse en el componente (si llega al texto dentro del componente), quiero poder agregar elementos de intervalo a los elementos con los nombres de clase 'texto-1' y 'texto-2'. Después de agregar los elementos, llamo a setFontWeight para poner en negrita el peso de las letras sobre el cursor.

Por favor, cualquier ayuda sobre cómo implementar esto en reaccionar. Soy nuevo en reaccionar.