title: error due to usecontext returning undefined value before bringing the correct array
body: <p>I've built a code at <a href="https://codesandbox.io/s/trusting-framework-ylb991?file=/src/components/mapTest/index.js" rel="nofollow noreferrer">codesandbox</a> so I could display what is going on.</p>
  <p>When I uncomment the <code>&lt;p&gt;{chosenPokemon[0].id}&lt;/p&gt;</code> line in the aplication run a error: <code>Cannot read properties of undefined (reading 'id')</code>. Here is the file where the problem is going on:</p>
  <pre class="lang-js prettyprint-override"><code>import { usePokemon } from &quot;../../hooks/usePokemon&quot;;
  
  export const MapTest = () =&gt; {
    const { chosenPokemon } = usePokemon(&quot;ditto&quot;);
  
    console.log(chosenPokemon);
  
    return (
      &lt;&gt;
        &lt;h1&gt;Map Test&lt;/h1&gt;
  
        {/* &lt;p&gt;{chosenPokemon[0].id}&lt;/p&gt; */}
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>My conclusion is that my context file is bringing a undefined value before bringing the correct one. Here is my context file:</p>
  <pre><code>import { createContext, useContext, useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  const DittoContext = createContext();
  
  export default function DittoProvider({ children }) {
    const [ditto, setDitto] = useState();
    const api = axios.create({
      baseURL: &quot;https://pokeapi.co/api/v2/pokemon&quot;
    });
  
    useEffect(() =&gt; {
      api
        .get(&quot;/ditto&quot;)
        .then((response) =&gt; setDitto(response.data))
        .catch((err) =&gt; console.log(err));
    }, []);
  
    return (
      &lt;DittoContext.Provider value={{ ditto, setDitto }}&gt;
        {children}
      &lt;/DittoContext.Provider&gt;
    );
  }
  
  export const useDitto = () =&gt; {
    const context = useContext(DittoContext);
    const { ditto, setDitto } = context;
  
    return { ditto, setDitto };
  };
  </code></pre>
  <p>How can I fix this error that has been going on?</p>