array jsx element need key attr

[yongsheng.xia]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-chat-elements@12.0.5 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-chat-elements/src/ChatItem/ChatItem.tsx b/node_modules/react-chat-elements/src/ChatItem/ChatItem.tsx
index 5cb808a..b34db05 100644
--- a/node_modules/react-chat-elements/src/ChatItem/ChatItem.tsx
+++ b/node_modules/react-chat-elements/src/ChatItem/ChatItem.tsx
@@ -71,7 +71,7 @@ const ChatItem: React.FC<IChatItemProps> = ({
       <div className='rce-citem' onDragOver={onDragOver} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDrop={onDrop}>
         {!!props.onDragComponent && onDrag && props.onDragComponent(props.id)}
         {((onDrag && !props.onDragComponent) || !onDrag) && [
-          <div className={classNames('rce-citem-avatar', { 'rce-citem-status-encircle': statusColorType === 'encircle' })}>
+          <div key={'avatar'} className={classNames('rce-citem-avatar', { 'rce-citem-status-encircle': statusColorType === 'encircle' })}>
             <Avatar
               src={props.avatar}
               alt={props.alt}
@@ -103,7 +103,7 @@ const ChatItem: React.FC<IChatItemProps> = ({
               type={classNames('circle', { 'flexible': avatarFlexible })}
             />
           </div>,
-          <div className='rce-citem-body'>
+          <div key={'rce-citem-body'} className='rce-citem-body'>
             <div className='rce-citem-body--top'>
               <div className='rce-citem-body--top-title'>{props.title}</div>
               <div className='rce-citem-body--top-time'>{date && (props.dateString || format(date))}</div>

This issue body was partially generated by patch-package.

[Nam Nguyen Trong]

 <div key={'rce-citem-body'} className='rce-citem-body'>

Not working. Don't have key unique