title: useState causes this Error: Objects are not valid as a React child (found: object with keys {email, text, id})
body: <p>trying to use useState hook in some part of my code , but I get this error:</p>
  <p><code>Error: Objects are not valid as a React child (found: object with keys {email, text, id}). If you meant to render a collection of children, use an array instead.</code></p>
  <p>Removing everything in the parantheses of useState makes the error go away but, why is this causing a problem??</p>
  <pre class="lang-js prettyprint-override"><code>    import React , {createContext, useState} from 'react';
      import {v4 as uuid} from 'uuid';
      export const CommentContext = createContext();
      const CommentContextProvider = (props) =&gt; {
          const [comments , setComment] = useState([
              {email: 's.jahanmard@gmail.com',
               text:'Nicest guy eeeeveeer!', id:1},
              {email: 'jahanmard22@gmail.com',
               text:'buffed as f...', id:2}
          ]);
          const addComment = (email,text) =&gt;{
              setComment ([...comments, {email,text,id:uuid()}])
          }
          return (
              &lt;CommentContext.Provider value={{comments , addComment}}&gt;
                  {props.children}
              &lt;/CommentContext.Provider&gt;
          )
      }
      export default CommentContextProvider
  </code></pre>