asyncOnClick = true together with onClick just doesnt work about react-csv HOT 9 OPEN

import React, { useEffect, useRef, useState } from "react";
import { CSVLink } from "react-csv";

export default function App() {
  const [csvLoading, setCSVLoading] = useState(false);
  const [csvData, setCSVData] = useState([]);
  const ref = useRef();

  useEffect(() => {
    if (!csvLoading || csvData.length > 0) {
      return;
    }

    // Replace this Promise with your API call
    // Then setCSVData(newData), not the dummy data.
    new Promise((r) => setTimeout(r, 2000))
      .then((newData) => {
        setCSVData([
          {
            why: "doesn't this",
            feature: "work normally???",
          }
        ]);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [csvLoading]);

  useEffect(() => {
    if (csvData.length > 0 && csvLoading) {
      ref.current.link.click();
    }
  }, [csvData]);

  return (
    <div className="App">
      <button
        onClick={() => {
          if (!csvLoading && csvData.length === 0) {
            setCSVLoading(true);
          }
        }}
      >
        Download CSV
      </button>
      <CSVLink data={csvData} ref={ref} filename="data" />
    </div>
  );
}