title: Function addDoc() called with invalid data. Unsupported field value: undefined
body: <p>hello i am new to firebase I am creating a slack clone (chat app) I am getting  error when I am adding data in chat here is my firebase data snapshot in the collection room I have a collection messages in the given roomID <a href="https://i.stack.imgur.com/t1e9o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t1e9o.png" alt="enter image description here" /></a>
  here is my  chat code</p>
  <pre><code>import db from &quot;./firebase&quot;;
  import firebase from &quot;./firebase&quot;;
  import { useStateValue } from &quot;./stateProvider&quot;;
  
  function ChatMsg({ channelName, channelId }) {
    const [input, setInput] = useState(&quot;&quot;);
    const [{ user }] = useStateValue();
    const sendMessage = (e) =&gt; {
      
      e.preventDefault();
      if (channelId) {
        db.collection(&quot;rooms&quot;).doc(channelId).collection(&quot;messages&quot;).add({
          message: input,
          // timestamp: firebase.firestore.FieldValue.serverTimestamp(),
          user: user.displayName,
          userImage: user.photoURL
        });
        
        
      }
    };
  
    return (
      &lt;div className=&quot;chatInput&quot;&gt;
        &lt;form&gt;
          &lt;input
            value={input}
            onChange={(e) =&gt; setInput(e.target.value)}
            placeholder={`Message # ${channelName}`}
          /&gt;
          &lt;button type=&quot;submit&quot; onClick={sendMessage}&gt;
            SEND
          &lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  export default ChatMsg;
  </code></pre>
  <p>here is my error
  <a href="https://i.stack.imgur.com/1g7Qz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1g7Qz.png" alt="enter image description here" /></a></p>