I want an make an text animation that animate every single spell.

The animation data source is coming from an Array.

The animation is triggered based on key.(In React and also framer motion)

and we know otherwise if there isn't come the message >> Warning: Each child in a list should have a unique "key" prop.

If I try solve the unique key problem with index the error message is vasnished but the problem stayed >> not animating

So the advice other developers use unique key but not use index.

Okey I use unique key every single spell.

But the problem is there the "outer map function or div" i only use index.

My Animation accept this data form: Array in array so spell in word

so the problem this row

 <div key={index} > 

I think

But I open entire other solution.

What is the solution?

Thank you

My problem source post: StaggerChildren work only first render at text animation

import React from "react";
import "./AnimatedText.css";

export default function AnimatedText() {


  let animatedText = [
    [
      { name: "H", id: 1 },
      { name: "o", id: 2 },
      { name: "w", id: 3 },
    ],
    [
      { name: "s", id: 4 },
      { name: "o", id: 5 },
      { name: "l", id: 6 },
      { name: "v", id: 7 },
      { name: "e", id: 8 },
    ],
    [
      { name: "t", id: 9 },
      { name: "h", id: 10 },
      { name: "i", id: 11 },
      { name: "s", id: 12 },
      { name: "?", id: 13 },
    ],
  ];

  return (
    <div className="animated-text">
      <h1>Animated Text</h1>
     
      {animatedText.map((item,index) => (
        <div key={index} >
          {item.map((x) => (
            <p key={x.id}>{x.name}</p>
          ))}
        </div>
      ))}
    </div>
  );
}