I want to loop through and assign a custom CSS property to each element inside a map called "item", but I don't know how to do that. Below is my code:

import React from "react";

// Splitting Letters
const SplitText = React.memo(({ str }) => {
  

  const customStyle = {
    position: "absolute",
    /*top: some random top value,*/
    /*left: some random left value,*/
    zIndex: "initial",
    color: "green"
  };

  return (
    <div>
      {str.split("").map((item, index) => {

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

export default SplitText;

My "item" has a set of letters and I want to catch hold of each letter and somehow map the customStyle CSS property to it.

Any suggestions would be of great help.