Message: Rendered more hooks than during the previous render

[Anxhul10]

Description
Getting an issue in Storybook when rendering a component that displays many hook-using children (e.g., MessageReactions.Reaction). Here's what happens:
Steps to reproduce

1. Run yarn storybook on packages/fusealge
2. Navigate to the story for the Message component/ALotOfReaction
3. Initially the component renders without errors
4. But if I refresh the page while remaning on the message canvous, I see the error:
   Error: Rendered more hooks than during the previous render.
5. To get rid of it, I:
   Switch to another canvas and come back
   OR click the canvas refresh button again

Insert an image/gif
https://github.com/user-attachments/assets/0eb5906e-a61d-4683-aba6-82afb0024306

edit : this behaviour is same for Icon/Available Icons

[Anxhul10]

In packages/fuselage/src/components/Message/Messages.stories.tsx at line 870

{Array.from({ length: 100 }).map((_, index) => (
            <MessageReactions.Reaction counter={index} mine={!(index % 3)} />
          ))}

adding key={index} seems to fixx the erorr

{Array.from({ length: 100 }).map((_, index) => (
                <MessageReactions.Reaction
                  key={index}
                  counter={index}
                  mine={!(index % 3)}
                />
              ))}

edit: using index as key is not a good idea
ref - https://stackoverflow.com/questions/59517962/react-using-index-as-key-for-items-in-the-list