Custom Headers Break Export

[Connor Tangney]

Ran into this issue on react-csv: 2.2.2 --

Given the following objects:

  const csvData = [
    {
      issueKey: 'PLAT-8992',
      version: '223',
      releaseNotes:
        'Long string goes here that has all the release notes for a user to read, blah blah blah',
      typeOfChange: 'New Feature',
      components: ['Custom Widget', 'Widget Editor Page'],
      userReq: [],
    },
  ];

  const csvHeaders = [
    { label: 'Unique ID', key: 'issueKey' },
    { label: 'Release', key: 'version' },
    { label: 'Release Notes', key: 'releaseNotes' },
    { label: 'Type of Change', key: 'typeOfChange' },
    { label: 'Implemented By', key: 'components' },
    { label: 'User Requirements', key: 'userReq' },
  ];

  <CSVLink data={csvData} headers={csvHeaders}>Download CSV Data</CSVLink>

Instead of containing the csvData the file which is exported instead contains the page's markup. I have attached a sample file here.

Omitting csvHeaders from the CSVLink definition results in the file being generated correctly, albeit without the custom headers applied.

When providing an array of strings as the header object (['Label1', 'Label2', ...]), the exported file appears to contain the custom labels but does not contain any of the csvData.

No errors are ejected to the console during this process. Please let me know if you require any additional information about my environment, etc!

Thanks!