Tengo algunas letras que quiero dispersar dentro de un contenedor al azar, pero no puedo encontrar la forma de obtener cada letra y cambiar su CSS para fijar la posición aleatoria dentro del contenedor. Mi código es el siguiente:

 import React, { useState, useEffect } from "react"; import "./styles.css"; // Splitting Texts const SplitText = React.memo(({ str }) => { return ( <div> {str.split("").map((item, index) => { return <div key={index}>{item}</div>; })} </div> ); }); function debounce(fn, ms) { let timer; return (_) => { clearTimeout(timer); timer = setTimeout((_) => { timer = null; fn.apply(this, arguments); }, ms); }; } // Main App export default function App() { //Getting the window width and height using useEffect const [dimensions, setDimensions] = useState({ height: window.innerHeight, width: window.innerWidth }); useEffect(() => { const debouncedHandleResize = debounce(function handleResize() { setDimensions({ height: window.innerHeight, width: window.innerWidth }); }, 1000); window.addEventListener("resize", debouncedHandleResize); return (_) => { window.removeEventListener("resize", debouncedHandleResize); }; }); //useEffect End //define random position on screen var randLeft = Math.floor(Math.random() * dimensions.width); var randTop = Math.floor(Math.random() * dimensions.height); console.log(randLeft); console.log(randTop); return ( <div className="container"> <h1> <SplitText str={"Lucie Bachman"} /> </h1> <h2> <SplitText str={"Hey, this is my first post on StackOverflow!"} /> </h2> </div> ); }

La salida deseada debería ser como en este CodePen

Enlace a mi Sandbox de trabajo: haga clic en

Cualquier sugerencia de cómo puedo hacerme con cada letra sería de gran ayuda.