I think you've forgot to add the length keyword in your for loop.

Here is working code:

import React from "react";

const customStyle = {
    position: "absolute",
    top: "",
    left: "",
    zIndex: "initial",
    color: "green"
};

// Splitting Letters
const SplitText = React.memo(({ str }) => {
    return (
        <div>
            {str.split("").map((item, index) => {
                var randLeft = Math.floor(Math.random() * 1000);
                var randTop = Math.floor(Math.random() * 600);

                let letter = item;

                for (let i = 0; i < item.length; i++) { // item.length
                    customStyle.top = +randTop + "px";
                    customStyle.left = +randLeft + "px";

                    letter = letter + i;
                }
                console.log(customStyle.top);

                return (
                    <div key={index} style={customStyle}>
                        {letter}
                    </div>
                );
            })}
        </div>
    );
});

I fixed 2 bugs.

1. You are splitting a string at "". So you will only get letters, never a string of multiple letters. That means using a loop here is nonsense!
2. In your code you were using a reference to customStyle. Anytime you change a value you are changing it everywhere. Therefore copy the value or create a new one. Insert that value in your output.

Code

import React from "react";

// Splitting Letters
const SplitText = React.memo(({ str }) => {
  return (
    <div>
      {str.split("").map((item, index) => {
        const style = { 
          position: "absolute",
          top: Math.floor(Math.random() * 600) + 'px',
          left: Math.floor(Math.random() * 600) + 'px',
          zIndex: "initial",
          color: "green"
        };

        return (
          <div key={index} style={style}>
            {item}
          </div>
        );
      })}
    </div>
  );
});

export default SplitText;