title: React dropdown issue
body: <p>I have a dropdown component and data from Firebase which I need to filter out. The first time, selection works, but the second time I get an empty state and can't select all or make a new selection.
  Thanks a lot in advance.</p>
  <p><em>Main component with DB reference and filter function:</em></p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import firebase from &quot;../firebase&quot;;
  import Categories from &quot;./Categories&quot;;
  
  const TourMenu = () =&gt; {
  const [tours, setTours] = useState([]);
  
  useEffect(() =&gt; {
    const dbRef = firebase.database().ref();
  
    dbRef.on(&quot;value&quot;, (snapshot) =&gt; {
      const data = snapshot.val();
      const newToursArray = [];
  
    for (let inventoryName in data) {
      const toursObject = {
        id: inventoryName,
        name: data[inventoryName].name,
        category: data[inventoryName].category,
        seats: data[inventoryName].seats,
        date: data[inventoryName].date,
      };
      newToursArray.push(toursObject);
     }
     setTours(newToursArray);
    });
  }, []);
  
   const filterItemsCat = (category) =&gt; {
      if (category === &quot;all&quot;) {
        setTours(tours);
        return;
      }
      const newItems = tours.filter((item) =&gt; item.category === category);
      setTours(newItems);
  
    };
  
    return (
    &lt;div&gt;
    &lt;h1&gt;Hello from tour menu&lt;/h1&gt;
  
    &lt;Categories filterItemsCat={filterItemsCat} /&gt;
  
    {tours
      .sort((a, b) =&gt; a.date &gt; b.date)
      .map((x) =&gt; {
        return (
          &lt;div
            key={x.id}
            style={{
              border: &quot;solid 1px&quot;,
              bordercolor: &quot;grey&quot;,
              width: &quot;230px&quot;,
              margin: &quot;10px auto&quot;,
            }}
          &gt;
            &lt;p&gt;{x.name}&lt;/p&gt;
            &lt;p&gt;{x.category}&lt;/p&gt;
            &lt;p&gt;date: {x.date}&lt;/p&gt;
            &lt;p&gt;seats: {x.seats}&lt;/p&gt;
          &lt;/div&gt;
        );
      })}
  
    &lt;h2&gt;{tours.length === 0 &amp;&amp; &quot;hold on ...&quot;}&lt;/h2&gt;
  &lt;/div&gt;
    );
  };
  
  export default TourMenu;
  </code></pre>
  <p><em>here is dropdown component (categories hardcoded for now):</em></p>
  <pre><code>import React from &quot;react&quot;;
  
  function Categories({ categories, filterItemsCat }) {
   
    return (
      &lt;div className=&quot;categories-container wrapper&quot;&gt;
        &lt;div className=&quot;btn-container&quot;&gt;
          &lt;select onChange={(e) =&gt; filterItemsCat(e.target.value)}&gt;
            &lt;option value=&quot;&quot;&gt;--Please choose category--&lt;/option&gt;
            &lt;option value=&quot;all&quot;&gt;--CHOOSE ALL--&lt;/option&gt;
            &lt;option value=&quot;land&quot;&gt;land&lt;/option&gt;
            &lt;option value=&quot;water&quot;&gt;water&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default Categories;
  </code></pre>