How can I split letters and animate its position property based on some condition

I am trying to make an alphabet soup like in this CodePen using react.

The problem i'm facing at present is that I want to display the split result inside my main component. At present i'm able to animate its CSS property a bit but unable to display the split result. A hint on how to go ahead will be really helpful.

My code is as below:

 import React, {useState} from "react";
        
        export default function SlideCard(props) {
          //const [ split, setSplitted ] = useState([]); 
          //console.log(split);

          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;
        
//return setSplitted(letter); 
    // I tried setting it to a useState, but don't know why it is giving me an infinite loop.
            });
          } else {
            scatter.top = "50%";
            scatter.left = "50%";
          }
        
    //main component
          return <div style={scatter}>{inputText}</div>;
        }

file=/src/components/SlideCard.jsx