title: Error when clicking on an element: Objects are not valid as a React child
body: <p>I use a map with custom markers on the site. On the right is a list of houses that match the markers. I need to implement the following: when clicking on a marker, the house that corresponds to the marker goes to 1st place in the list. Marker coordinates and house information comes from Firebase. Now I have implemented the code for this logic, but when I click on the marker, I get an error - Objects are not valid as a React child. How can it be solved?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const List = ({ selectedHouse }) =&gt; {
    const [houseTitles, setHouseTitle] = useState([]);
    useEffect(() =&gt; {
      const q = query(collection(db, "map-markers"));
      onSnapshot(q, (querySnapshot) =&gt; {
        setHouseTitle(
          querySnapshot.docs.map((doc) =&gt; ({
            id: doc.id,
            data: doc.data(),
          }))
        );
      });
    }, []);
    return (
      &lt;div style={{ width: "50%" }}&gt;
        {&lt;ListItem title={houseTitles[selectedHouse]} /&gt;}
        {houseTitles
          .filter((title, index) =&gt; index !== selectedHouse)
          .map((title, index) =&gt; (
            &lt;ListItem key={index} title={title.data.title} /&gt;
          ))}
      &lt;/div&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>console.log(houseTitles[selectedHouse]): <a href="https://i.stack.imgur.com/GuZfb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GuZfb.png" alt="enter image description here" /></a></p>