I'm new to Firebase and practicing with a Chat app. React warns that the list of my messages needs a unique key-id which caused by this line code code:

{messages && messages.map(msg => <ChatMessage key={msg.id} message={msg} />)}

I don't understand why it does not take my key={msg.id}. Any help is appreciated. Here is a snapshot of my function which causes react console error:

function ChatRoom() { 
  const messagesRef = firestore.collection('messages');
  const query = messagesRef.orderBy('createdAt').limit(25);

  const [messages] = useCollectionData(query, { idField: 'id' });
  const [formValue, setFormValue] = useState('');

  return (
   <>
    <main>
      {messages && messages.map(msg => <ChatMessage key={msg.id} message={msg} />)}
    </main>
    <form onSubmit={sendMessage}>
      <input value={formValue} onChange={(e) => setFormValue(e.target.value)} placeholder="say something nice" />
      <button type="submit" disabled={!formValue}>