title: useEffect() is not seeing changes in Array object
body: <pre><code>    const [entries, setEntries] = useState([])
  
    useEffect(() =&gt; {
      let active = true
      if (active) {
        divisions.forEach((division) =&gt; {
          let teams = []
          let tempDivision = division
          db.collection(`${division.ref}/teams`).get().then((docs) =&gt; {
            docs.forEach((doc, index) =&gt; {
              teams.push(doc.data())
            })
            tempDivision['teams'] = teams
          })
          setEntries(oldArray =&gt; [...oldArray, tempDivision])
        })
      }
      
      return () =&gt; {
        active = false;
      };
    }, [divisions]);
  </code></pre>
  <p>I'm looking to get setEntries update and re-render the front end. Currently, <code>entries</code> is updated by useEffect() but it doesn't not trigger re-render. So in this case, it's only rendering what is in the initializer <code>useState([])</code></p>
  <p><strong>EDIT 1</strong>
  This is another way i'm trying to &quot;watch&quot; the array, Entries, so that the state can be re-rendered, but I am still not successful</p>
  <pre><code>export const TeamsTable = ({event, divisions}) =&gt; {
    const [entries, setEntries] = useState(divisions)
    useEffect(() =&gt; {
      let active = true
  
      if (active) {
        entries.map((division, index) =&gt; {
          let teams = []
          db.collection(`${division.ref}/teams`).get().then((docs) =&gt; {
            console.log(&quot;Tests&quot;)
            docs.forEach((doc, index) =&gt; {
              teams.push(doc.data())
            })
            entries[index]['teams'] = teams
          })
        })
        setEntries(entries)
      }
      
      return () =&gt; {
        active = false;
      };
    }, [entries]);
  
    return (
      &lt;MuiThemeProvider theme={theme}&gt;
        { entries.map((division, index) =&gt; {
          return &lt;MUIDataTable
            title={&lt;Typography style={{fontWeight: 'bold'}}&gt;{division.name.toUpperCase()}&lt;/Typography&gt;}
            data={division.teams}
            columns={columns}
            options={options}
            style={{marginBottom: 15}}
            key={index}
          /&gt;
        })}
      &lt;/MuiThemeProvider&gt;
    )
  }
  </code></pre>