How to export the csv after sorting the table and have the csv display the sorted table using react-csv?

Question

I want the data exported in the csv to be displayed the same way it is being displayed on the table.

For e.g. if I have sorted the table and the order changes, it should appear the same in the csv. Currently, when exporting, it takes the format as it was before sorting.

Sample Code:

import { CSVLink, CSVDownload } from 'react-csv'
export default function ExportToCSV() {
    const headers = [
        { label: "First Name", key: "firstName" },
        { label: "Last Name", key: "lastName" },
        { label: "Email", key: "email" },
        { label: "Age", key: "age" }
      ];
       
      const data = [
        { firstName: "Warren", lastName: "Morrow", email: "[email protected]", age: "36" },
        { firstName: "Gwendolyn", lastName: "Galloway", email: "[email protected]", age: "76" },
        { firstName: "Astra", lastName: "Wyatt", email: "[email protected]", age: "57" },
        { firstName: "Jasmine", lastName: "Wong", email: "[email protected]", age: "42" },
        { firstName: "Brooke", lastName: "Mcconnell", email: "[email protected]", age: "56" },
        { firstName: "Christen", lastName: "Haney", email: "[email protected]", age: "23" },
        { firstName: "Tate", lastName: "Vega", email: "[email protected]", age: "87" },
        { firstName: "Amber", lastName: "Brady", email: "[email protected]", age: "78" },
        { firstName: "Philip", lastName: "Whitfield", email: "[email protected]", age: "22" },
        { firstName: "Kitra", lastName: "Hammond", email: "[email protected]", age: "35" },
        { firstName: "Charity", lastName: "Mathews", email: "[email protected]", age: "63" }
      ];
       
      const csvReport = {
        data: data,
        headers: headers,
        filename: 'Clue_Mediator_Report.csv'
      };
    return (
        <>
        <CSVLink {...csvReport}>Download me</CSVLink>
      </>
    );
}

Thanks.