title: React using fetch returns undefined after refreshing the page
body: <p>When I try to get information from the api and retrieve it into a scroll list, at first retrieval is successful, but when the page is refreshed, an error message is received under inspect: &quot;Uncaught TypeError: response is null&quot;.
  How can this issue be resolved?
  The api I'm using: <a href="https://opentdb.com/api_category.php" rel="nofollow noreferrer">https://opentdb.com/api_category.php</a></p>
  <p>Thank you.</p>
  <pre><code>axios.defaults.baseURL = &quot;https://opentdb.com&quot;;
  const GetApiData =  ({ url }) =&gt; {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(&quot;&quot;);
  const [loading, setLoading] = useState(true);
  
  useEffect(() =&gt; {
    const fetchData = async() =&gt; {
      await axios
        .get(url)
        .then((res) =&gt; setResponse(res.data))
        // console.log('cccc')
        .catch((err) =&gt; setError(err))
        .finally(() =&gt; setLoading(false));
    };
    fetchData();
  }, [url]);
  
  return { response, error, loading };
  </code></pre>
  <p>Here i call it, the problem is with the line :</p>
  <pre><code>&lt;FieldOptions options={response.trivia_categories} label=&quot;Category&quot; /&gt;
  </code></pre>
  <pre><code>const { response, error, loading } = GetApiData({ url: &quot;/api_category.php&quot; });
      return (
      
      &lt;form &gt;
        &lt;FieldOptions options={response.trivia_categories} label=&quot;Category&quot; /&gt;
        &lt;FieldOptions options={difficultyOptions} label=&quot;Difficulty&quot; /&gt;
        &lt;FieldOptions options={typeOptions} label=&quot;Type&quot; /&gt;
        &lt;TextField id=&quot;filled-basic&quot; label=&quot;How many questions?&quot; variant=&quot;outlined&quot; type=&quot;number&quot; onChange={handleChange}/&gt;
        &lt;Box mt={3} width=&quot;100%&quot;&gt;
          &lt;Button fullWidth variant=&quot;contained&quot; type=&quot;submit&quot;&gt;
            Get Started
          &lt;/Button&gt;
        &lt;/Box&gt;
  
      &lt;/form&gt;
      
        )
      }
  </code></pre>