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.

My present result inside CodeSandbox

My code is as below:

          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>;
    }