title: add item to async array with splice and useState
body: <p>I'm fetching async object with an array and a value. I want to take the array and add that other value to the same array at a random index.</p>
  <pre><code>{
     incorrect_answers: ['item1', 'item2', 'item3'],
     correct_answer: 'item4'
  }
  
  // I expect this: ['item1', 'item2', 'item4', 'item3'] the index for 'item4' is random
  </code></pre>
  <p>I get the array with useState fine, but don't know how to add the other value in the same useState line:</p>
  <pre><code>  const [index, setIndex] = useState(0);
    const [answers, setAnswers] = useState([]);
  
  useEffect(()=&gt;{
      (async () =&gt; {
        const data = await fetch ('https://opentdb.com/api.php?amount=10&amp;type=multiple');
        const json = await data.json();      
        setAnswers(json.results[index].incorrect_answers);
  
  //if I use .splice here, I get only the correct_answer in the array
  
        answers.splice(random,0, json.results[index].correct_answer);
        setAnswers(answers)
      })();
    }, []);
  
  </code></pre>
  <p>UPDATE:</p>
  <p>the complete project is here: <a href="https://codepen.io/metsuge/pen/qBxyrMY" rel="nofollow noreferrer">https://codepen.io/metsuge/pen/qBxyrMY</a>
  The idea is that when clicking Next Question, the index would update to show the next object in the array. But the index value in NextQuestion() and in the if statement is off by 1, so questions and answers are mixed</p>