title: Firebase Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds})
body: <p>First I query for my data from firebase:</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
      if (user) {
        async function fetchData() {
          const request = await db
            .collection(&quot;users&quot;)
            .doc(user)
            .collection(&quot;notifications&quot;)
            .onSnapshot((snapshot) =&gt;
              setNotifications(
                snapshot.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id }))
              )
            );
        }
        fetchData();
      } else {
        setNotifications([]);
      }
    }, [user]);
  </code></pre>
  <p>The query returns this:</p>
  <p><a href="https://i.stack.imgur.com/trC7u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/trC7u.png" alt="enter image description here" /></a></p>
  <p>Now, when I try to render the data:</p>
  <pre class="lang-js prettyprint-override"><code>   &lt;div className=&quot;notifications&quot;&gt;
        {notifications.map((notification) =&gt; (
          &lt;NotificationContainer
            notificationType={notification.notificationType}
            notificationFrom={notification.notificationFrom}
            timestamp={notification.timestamp}
            linkId={notification.linkId}
          /&gt;
        ))}
  </code></pre>
  <p>When I try to render the data on the page, I get the following error:</p>
  <p><code>Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead.</code></p>
  <p>Any idea what I am doing wrong? I think there may be something wrong in the day I am reading the data from my <code>notifications</code> array</p>