Using Tailwind classes in React, why is the color of my text not changing as expected?

Question

I want the color of the text to be all different and based on the color inside the array colors[] by using map function and template literal.

const title = "Hello".split("");
const colors = [
  "#8145f6",
  "#188ae0",
  "#f3b92a",
  "#f93669",
  "#5fb84e",
];

<motion.div className="">
      {title.map((letter, index) => {
        return (
          <motion.span
            className={`text-5xl text-[${colors[index]}]`}
            key={index}
          >
            {letter}
          </motion.span>
        );
      })}
</motion.div>

I'm pretty sure that the syntax is already correct since it's showing properly in inspect (for the tailwind syntax) and if I replace the ${colors[index]} with just #8145f6 it worked, but with the mapping I'm still in the blue of why it won't work.

Any suggestions/alternatives/critics will be appreciated! Sorry beforehand if there's a mistake in my question format as I'm still new to asking questions Thank you for your time!

P.S: I tried :nth-child() selector, Thank you Ryan for the suggestion, it gives the desired result! But is there still a way to make it more dynamic and uses something like the mapping function or something else that makes it more 'automatic' or with lesser lines of code? Once again really appreciate the suggestion thank you!