Estoy tratando de hacer una sopa de letras como en este CodePen usando reaccionar.

El problema al que me enfrento en este momento es que quiero mostrar el resultado dividido dentro de mi componente principal. En este momento, puedo animar un poco su propiedad CSS pero no puedo mostrar el resultado de la división.

Mi resultado actual dentro de CodeSandbox

Mi código es el siguiente:

 import React from "react"; export default function SlideCard(props) { const { id, idx, title } = props; const inputText = title; const scatter = { position: "absolute", top: "", left: "", zIndex: "initial", transition: "left 2s, top 2s" }; if (id !== idx) { //split if not active// inputText.split("").map((letter) => { var randLeft = Math.floor(Math.random() * 400); var randTop = Math.floor(Math.random() * 200); scatter.top = +randTop + "px"; scatter.left = +randLeft + "px"; console.log(letter); //How can I use this split inside the main component return letter; }); } else { scatter.top = "50%"; scatter.left = "50%"; } //main component return <div style={scatter}>{inputText}</div>; }