title: Array data from Graphql is not populating a component in React
body: <p>I am trying to render multiple checkboxes that have two functions:</p>
  <ol>
  <li>Show two states: checked and unchecked</li>
  <li>Update a checked array with the checked checkboxes</li>
  </ol>
  <p>Currently, I am successfully able to accomplish these two goals with dummy data:</p>
  <pre class="lang-js prettyprint-override"><code>const dummyPlayers = [
      { id: 1, name: 'Puppa' },
      { id: 2, name: 'Korvo' },
      { id: 3, name: 'Jesse' },
      { id: 4, name: 'Terry' },
      { id: 5, name: 'Gobblins' }
    ]
  </code></pre>
  <p>This is the shape of the array I want to populate the checkboxes with:</p>
  <pre class="lang-js prettyprint-override"><code>[
      {
          &quot;id&quot;: &quot;936d6050-00df-4bd4-bc54-6ce58ad0210c&quot;,
          &quot;name&quot;: &quot;Travis&quot;,
          &quot;owner&quot;: &quot;moralesfam&quot;,
          &quot;type&quot;: &quot;Member&quot;,
          &quot;createdAt&quot;: &quot;2021-09-24T20:08:02.292Z&quot;,
          &quot;updatedAt&quot;: &quot;2021-09-24T20:08:02.292Z&quot;
      }...
  ]
  
  </code></pre>
  <p>However, when I start pulling data in from a database with Graphql, while I am able to render the checkboxes to the DOM, they are not interactive (don't show checked state) and don't log the checked checkboxes.</p>
  <p>I bring in the data, an array of objects through a custom React hook, called useMembers and the data is stored in a members array. Console logging members prints out the array, but as soon as I swap the dummyPlayers for the members array, the two goals I stated earlier are unsuccessful.</p>
  <pre class="lang-js prettyprint-override"><code>// RecordGame.js
  import React, { useState } from 'react'
  
  import useLoadMembers from '../hooks/useLoadMembers'
  import useUser from '../hooks/useUser'
  
  
  function RecordGame() {
    const dummyPlayers = [
      { id: 1, name: 'Puppa' },
      { id: 2, name: 'Korvo' },
      { id: 3, name: 'Jesse' },
      { id: 4, name: 'Terry' },
      { id: 5, name: 'Gobblins' },
    ]
  
    const { members } = useLoadMembers(updateLoading)
    const { user } = useUser()
  
    const [checkedState, setCheckedState] = useState(
      new Array(members.length).fill(false)
    )
  
  
    let playingPlayers = []
    for (var index in checkedState) {
      if (checkedState[index] === true) {
        playingPlayers.push(dummyPlayers[index])
      }
    }
  
    console.log(playingPlayers)
  
    const handleOnChange = (position) =&gt; {
      const updatedCheckedState = checkedState.map((player, index) =&gt;
        index === position ? !player : player
      )
      setCheckedState(updatedCheckedState)
    }
  
    // Rendered elements
    const playerCheckboxes = dummyPlayers.map((player, index) =&gt; {
      return (
        &lt;div key={index}&gt;
          &lt;label htmlFor={player.name}&gt;
            &lt;input
              type=&quot;checkbox&quot;
              id={player.name}
              name={player.name}
              checked={checkedState[index]}
              onChange={() =&gt; handleOnChange(index)}
            /&gt;
            &lt;span&gt; {player.name}&lt;/span&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      )
    })
  
    return (
          &lt;div&gt;
            &lt;form&gt;
              {/* Game Players */}
              &lt;div&gt;
                &lt;label htmlFor=&quot;players&quot;&gt;
                  Who Played?
                &lt;/label&gt;
                &lt;div&gt;{playerCheckboxes}&lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        )}
      &lt;/Dashboard&gt;
    )
  }
  
  export default RecordGame
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>//useLoadMember.js
  import { useState, useEffect } from 'react'
  import { API, Auth } from 'aws-amplify'
  import { listMembers } from '../graphql/queries'
  
  const useLoadMembers = (updateLoading) =&gt; {
    const [members, updateMembers] = useState([])
  
    useEffect(() =&gt; {
      fetchMembers()
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
  
    const fetchMembers = async () =&gt; {
      try {
        let memberData = await API.graphql({
          query: listMembers,
          variables: { limit: 100 },
        })
  
        updateLoading(false)
  
        let allMembers = memberData.data.listMembers.items
        setFilteredMembers(allMembers)
      } catch (err) {
        console.error(err)
      }
    }
  
    const setFilteredMembers = async (allMembers) =&gt; {
      const { username } = await Auth.currentAuthenticatedUser()
      const myMemberData = allMembers.filter((p) =&gt; p.owner === username)
  
      updateMembers(myMemberData)
    }
  
    return { members }
  }
  
  export default useLoadMembers
  
  </code></pre>
  <p>In this first, picture, I used the dummyPlayers array and got the results I wanted.
  <a href="https://i.stack.imgur.com/9OBra.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9OBra.png" alt="enter image description here" /></a></p>
  <p>However, in this second screenshot, I replaced the dummyData with the members array and did not get any results I wanted.</p>
  <p><a href="https://i.stack.imgur.com/LLgpX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LLgpX.png" alt="enter image description here" /></a></p>
  <p>I'm just confused on why I am getting different results with the same array shape.</p>