title: Axios request keeps returning twice undefined and twice the data
body: <p>I'm trying to fetch an api on a custom reactjs hook using Axios. I keep getting twice the response as undefined and after that twice as a successful fetch with the data. The undefined breaks my app.</p>
  <p>Btw I'm fetching from the randomuser api.</p>
  <pre><code>import axios from &quot;axios&quot;;
  import { useState, useEffect } from &quot;react&quot;
  
  export const useFetch = (url) =&gt; {
      const [loading, setLoading] = useState(false);
      const [data, setData] = useState([]);
      const [error, setError] = useState('')
  
      const getData = () =&gt; {
          setLoading(true)
          try {
              axios.get(url)
                  .then(response =&gt; setData(response.data));
                  setLoading(false)
            } catch (error) {
              setError(error)
            }
      };
  
      useEffect(() =&gt; {
          getData()
      }, [url])
  
      return {loading, data, error}
  }
  </code></pre>
  <p>Trying to use it here and map over it</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import { useParams } from 'react-router-dom';
  import { useFetch } from '../custom_hooks/useFetch';
  
  const PersonDetails = () =&gt; {
  
      const { loading, data , error } = useFetch('https://randomuser.me/api?results=20');
      const { results } = data;
      const { id } = useParams();
  
      const [person, setPerson] = useState({})
  
      useEffect(() =&gt; {
          const newPerson = results?.find(person =&gt; person.login.uuid === parseInt(id))
          setPerson(newPerson)
          console.log(newPerson)
      }, [])
  
      return (
          &lt;div&gt;
              {person.name.first}
          &lt;/div&gt;
      )
  }
  
  export default PersonDetails
  </code></pre>
  <p>This is the thing I actually Im trying to do, but now because it is undefined, I get that cannot read properties of undefined...</p>