title: Loading data asynchronously and downloading CSV data with a click is one step behind the latest retrieved data
body: <p>using the react-csv package, I am loading data asynchronously and then trying to download the retrieved data from the server with one click. The problem I am currently facing is that the click is a step behind the current state. When the component first renders it downloads an empty CSV file and on the second click it downloads the data from the previous fetch, not the current/latest fetch.That is the same situation that is described <a href="https://github.com/react-csv/react-csv/issues/221" rel="nofollow noreferrer">here</a> , but the solution mentioned there didn't work in my case  : se here is the code am working on :</p>
  <pre><code>  const [newData, setNewData] = useState([]);
    const csvLink = React.createRef();
  
     const csvExport = (
      &lt;div&gt;
        &lt;Button className=&quot;pull-right title-button&quot; onClick={getData}&gt;
          CSV Export
        &lt;/Button&gt;
        &lt;CSVLink data={newData} headers={headers} target=&quot;_blank&quot; ref={csvLink}&gt;&lt;/CSVLink&gt;
      &lt;/div&gt;
    );
  
  const getData = async () =&gt; {
      await getRetailLinkOutcomes(auth, startDate, endDate, 0, 0, filters, sort, sortDirection, false).then((response) =&gt; {
        setNewData(response.records);
        csvLink.current.link.click();
      });
    };
  </code></pre>