title: While iterating the array, the records are not completely displaying in react hooks page
body: <p>While iterating using <code>map</code> function in <code>react-hooks</code>, array data is not properly displaying in the page, I could see the array has got 3 records, but while iterating it is displaying only two records and that too same image got displayed twice. Could someone please help me to identify the issue here ?
  I can see a warning error logged in console:
  <a href="https://i.stack.imgur.com/3e8gI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3e8gI.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/Hlor4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hlor4.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/WxbfB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WxbfB.png" alt="enter image description here" /></a></p>
  <pre><code>import React, { useRef, useEffect, useState } from &quot;react&quot;;
  const [dailyStatusPlayers, setDailyStatusPlayers] = useState([]);
  const isMounted = useRef(false);
  
      useEffect(() =&gt; {
        isMounted.current = true;
        return () =&gt; isMounted.current = false;
      }, []);
  
  
      useEffect(() =&gt; {
          const fetchData = async () =&gt; {
            try {
              const res = await axios.get('http://localhost:8000/service/availability');
              if (isMounted.current) {
                 setDailyStatusPlayers(res.data.dailyStatus);
              }
            } catch (e) {
              console.log(e);
            }
          }
          fetchData();
        }, []);
  
     return (
          &lt;div className=&quot;availability_wrapper&quot;&gt;
           &lt;h4&gt;In: &lt;span className=&quot;displayInCount&quot;&gt;20&lt;/span&gt;&lt;/h4&gt;
              &lt;div className=&quot;wrap&quot;&gt;
                  &lt;div className=&quot;container&quot;&gt;
                      &lt;div className=&quot;dailystatus_section&quot;&gt;
                          &lt;span className=&quot;playerdailyrecord&quot;&gt;
                               &lt;h4&gt;Player Daily Status:&lt;/h4&gt;
                              &lt;div className=&quot;row&quot;&gt;
                                  {
                                  dailyStatusPlayers.map(([{id, photo, position, dailystatus}]) =&gt;(
                                  &lt;div key={id} className=&quot;playerdailyrecord_main&quot;&gt;
                                  &lt;span className=&quot;dailstatus_playerphoto&quot;&gt;&lt;img className=&quot;dailstatus_playerImage&quot; key={photo} src={photo}&gt;&lt;/img&gt;&lt;/span&gt;
                                  &lt;span className=&quot;dailstatus&quot; key={dailystatus}&gt;{dailystatus}&lt;/span&gt;
                                  &lt;span className=&quot;dailstatus_playerposition&quot; key={position}&gt;{position}&lt;/span&gt;
                                  &lt;/div&gt;
                                  ))        
                                  }
                              &lt;/div&gt;
                              &lt;button className=&quot;OverlayDailyStatus&quot; onClick={displayAvailabilityStatus}&gt;Enter&lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;DailyStatusDialog
                onSubmit={onSubmit}
                open={deleteDialog}
                onClose={() =&gt; setDeleteDialog(false)}
              /&gt;
          &lt;/div&gt;
      );
  </code></pre>
  <pre><code>const Availability = () =&gt;{
    
      const [team1, setTeam1] = useState([]);
      const [team2, setTeam2] = useState([]);
      const [deleteDialog, setDeleteDialog] = useState(false);
      const [playerId, setPlayerId] = useState(&quot;&quot;);
      const [helperText, setHelperText] = useState('');
      const loginUserEmail = localStorage.getItem('loginEmail');
      const [dailyStatusPlayers, setDailyStatusPlayers] = useState([]);
      const [teamData, setTeamData] = useState([]);
      //const [dailyinput, setDailyInput] = useState('');
      const [inCount, setInCount] = useState(&quot;&quot;);
      const isMounted = useRef(false);
      const c_day = moment().format('dddd');
      const c_date = moment().format('DD-MM-YYYY');
  
      useEffect(() =&gt; {
        isMounted.current = true;
        return () =&gt; isMounted.current = false;
      }, []);
  
      const displayAvailabilityStatus = () =&gt;{
         setDeleteDialog(true);
      }
       
      useEffect(() =&gt; {
          const fetchData = async () =&gt; {
            try {
              const res = await axios.get('http://localhost:8000/service/availability');
              if (isMounted.current) {
                 setDailyStatusPlayers(res.data.dailyStatus[0]);
                 //setTeamData(res.data.dailyStatus[0]);
                 console.log(&quot;Complete array:&quot;+res.data.dailyStatus[0]);
                 
              }
            } catch (e) {
              console.log(e);
            }
          }
          fetchData();
        }, []);
  
  
        let i = 0;
        const tempTeam1 = [];
        const tempTeam2 = [];
        while(teamData.length &gt; 0) {
          const random = Math.floor(Math.random() * teamData.length);
          i%2 === 0 ? tempTeam1.push(teamData[random]) : tempTeam2.push(teamData[random]);
          teamData.splice(random, 1);
          i++;
        }
      
        useEffect(() =&gt; {
        setTeam1(tempTeam1);
        setTeam2(tempTeam2);
        },[]);
  
     
      const onSubmit = (dailyinput) =&gt;{
          console.log(&quot;Here Daily:&quot;+ dailyinput);
          const dailyStatus = async () =&gt; {
              try {
                  const params = {
                      email: loginUserEmail,
                  };
                const res = await axios.post('http://localhost:8000/service/availability', { dailystatus: dailyinput }, {params} );
                console.log(&quot;Dailystatus update&quot; + res.data.success);
                if (res.data.success) {
                  setDeleteDialog(false);
                }
                else {
                  console.log(res.data.message);
                  setHelperText(res.data.message);
                }
              } catch (e) {
                setHelperText(e.response.data.message);
              }
            }
            dailyStatus();
      }
  
      return (
          &lt;div className=&quot;availability_wrapper&quot;&gt;
            &lt;div className=&quot;displayCurrentDate&quot;&gt;
              &lt;b&gt;{c_day}&lt;/b&gt;, {c_date}
            &lt;/div&gt;
           &lt;h4&gt;In: &lt;span className=&quot;displayInCount&quot;&gt;20&lt;/span&gt;&lt;/h4&gt;
              &lt;div className=&quot;wrap&quot;&gt;
                  &lt;div className=&quot;container&quot;&gt;
                      &lt;div className=&quot;dailystatus_section&quot;&gt;
                          &lt;span className=&quot;playerdailyrecord&quot;&gt;
                               &lt;h4&gt;Player Daily Status:&lt;/h4&gt;
                              &lt;div className=&quot;row&quot;&gt;
                                  {
                                  dailyStatusPlayers.map(({id, photo, position, dailystatus}) =&gt;(
                                  &lt;div key={id} className=&quot;playerdailyrecord_main&quot;&gt;
                                  &lt;span className=&quot;dailstatus_playerphoto&quot;&gt;&lt;img className=&quot;dailstatus_playerImage&quot; key={photo} src={photo}&gt;&lt;/img&gt;&lt;/span&gt;
                                  &lt;span className=&quot;dailstatus&quot; key={dailystatus}&gt;{dailystatus}&lt;/span&gt;
                                  &lt;span className=&quot;dailstatus_playerposition&quot; key={position}&gt;{position}&lt;/span&gt;
                                  &lt;/div&gt;
                                  ))        
                                  }
                              &lt;/div&gt;
                              &lt;button className=&quot;OverlayDailyStatus&quot; onClick={displayAvailabilityStatus}&gt;Enter&lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div className=&quot;container&quot;&gt;
                          &lt;div className=&quot;playerdistribution_section&quot;&gt;
                              &lt;h4&gt;Team Selection&lt;/h4&gt;
                              &lt;div className=&quot;wrap&quot;&gt;
                                      &lt;div className=&quot;left_col&quot;&gt;
                                          {
                                          team1.map(({id, name, image}) =&gt;(
                                          &lt;div&gt;
                                               &lt;span key={name}&gt;{name}&lt;/span&gt;
                                          &lt;/div&gt;
                                          ))
                                        }
                                      &lt;/div&gt;
                                      &lt;div className=&quot;right_col&quot;&gt;
                                          {
                                          team2.map(({id, name, image})=&gt;(
                                            &lt;div&gt;
                                            &lt;span key={name}&gt;{name}&lt;/span&gt;
                                            &lt;/div&gt;
                                          ))
                                          }
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;container&quot;&gt;
                          &lt;div className=&quot;weeklycount_graph_section&quot;&gt;
                                  &lt;span className=&quot;avail_newImageback&quot;&gt;
                                    &lt;img className=&quot;avail_newsImagesection&quot; src=&quot;images/greenplayer.png&quot;&gt;&lt;/img&gt;         
                                &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;DailyStatusDialog
                onSubmit={onSubmit}
                open={deleteDialog}
                onClose={() =&gt; setDeleteDialog(false)}
              /&gt;
          &lt;/div&gt;
      );
  
  }
  export default Availability;
  </code></pre>