Getting error after i put Async function in useEffect : <p>In the useEffect function, If i just mention the getResults function variable, the app doesn't crash, but when i call it as i'm doing in code below, i get these errors : </p>

<blockquote>
  <p>react-dom.development.js:21857 Uncaught TypeError: destroy is not a
  function</p>
</blockquote>

<p>and</p>

<blockquote>
  <p>Consider adding an error boundary to your tree to customize error handling behavior.</p>
</blockquote>

<pre><code>  function App() {
  const [foods, setFoods] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() =&gt; getResponse());
  const getResponse = async () =&gt; {
    const response = await fetch(sampleRequest);
    const data = await response.json();
    setFoods(data.hits);
  };
  let query = "Tomato";
  let sampleRequest = `https://api.edamam.com/search?q=${query}&amp;app_id=${"1811484f"}&amp;app_key=${"9cac93361efc99e2ebfbb8a453882af8"}`;

  return (
    &lt;div className="App"&gt;
      &lt;div className="main"&gt;
        &lt;div className="navbars"&gt;
          {" "}
          &lt;Navbars&gt;&lt;/Navbars&gt;
        &lt;/div&gt;
        &lt;div className="listings"&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
          &lt;Listing&gt;&lt;/Listing&gt;
        &lt;/div&gt;
        &lt;div className="footer"&gt;
          &lt;h5&gt;Made By YoYo Strangler in 2019&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
