title: How can I make a request to an API based on the response from another request? React Hook "useSwr" cannot be called inside a callback
body: <p>I'm having trouble figuring out how I can make a request to an API based on the response from another request. I'm making a request to an API and extracting the IP address from the response.</p>
  <p>Then I want to make another request to a different API using the IP address as input to the 2nd API. When I try the code below I get the error  <code>React Hook &quot;useSwr&quot; cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function</code></p>
  <p>I'm using React, TypeScript and SWR. I had this working with a simple JavaScript code but I think I'm getting confused with React/Typescript/SWR here. Is there a better way to accomplish what I'm trying to do?</p>
  <pre><code>import React, {FC} from 'react';
  import useSwr from 'swr';
  
  const fetcher = (...args: Parameters&lt;typeof fetch&gt;) =&gt; fetch(...args).then(response =&gt; response.json());
  
  const Webmap: FC = () =&gt; {
  
    const validatorUrl = 'http://url1.com';
    const ipInfoUrl =  'http://url2.com';
  
    const {data, error} = useSwr(validatorUrl, fetcher);
    const validatorData = data &amp;&amp; !error ? data : [];
  
    if (validatorData.results != null) {
      validatorData.results.forEach(u =&gt; {
      const ipAddress= u.ip_address
      console.log(ipAddress)
      // This is where I want to make another request. I want to feed ipAddress to ipInfoUrl
      const {data, error} = useSwr(ipInfoUrl, fetcher);
      const ipData = data &amp;&amp; !error ? data : [];
      });
    }
  </code></pre>