title: Uncaught (in promise) ReferenceError: xxx is not defined in react in useCallBack
body: <p>I have one Home component that need to wait for requestQuery api finish then parse the response <code>data</code> and pass the <code>data</code> into Child component as following code. if I move <code>data</code> variable out of <code>useCallBack</code> and hardcode the response <code>data</code> as mock data. my code is working. However after I move the data variable into useCallBack with async function I got the error
  <code>Uncaught (in promise) ReferenceError: results is not defined</code>
  How should I solve it?</p>
  <pre><code>import React, {useCallback, FC, useEffect, useState} from 'react';
  export const Home: FC = () =&gt; {
    const initData = useCallback(async (): Promise&lt;void&gt; =&gt; {
  
        // attempt to load based on flow
    const [hasLoadingFailed, setLoadingFailed] = useState&lt;boolean&gt;(false);
    const [isLoading, setLoading] = useState&lt;boolean&gt;(false);
  
      try {
        const {data, errors} = await requestQuery({num: 1});
  
        // if errors or no data, throw error
        if (!data || errors?.length) throw Error('Errors Retrieving Data');
  
        const {results = []}: QueryResponse = data;
        console.log({results}); //no problem to get results
      } catch {
        setLoadingFailed(true);
      } finally {
        setLoading(false);
      }
    }, []);
  
    useEffect(() =&gt; {
      initData();
    }, [initData]);
  
    return (
      &lt;div&gt;&lt;Child data={results} /&gt;&lt;/div&gt;
    );
  };
  ``
  </code></pre>