Reactjs - Export to csv showing in encoded format

I am using maatwebsite to export the records to CSV file. Using php laravel for backend.

Here is my following code:

Controller code:

    public static function exportCsvReport($params){
    
    header('Content-Encoding: UTF-8');
    header('Content-type: text/csv; charset=UTF-8');
    
    return Excel::download(new UsersExport, 'invoices.xlsx');

}

UserExport model:

<?php

namespace App\Exports;
use App\Models\Api\v1\Tbcall;
use Maatwebsite\Excel\Concerns\FromCollection;

class UsersExport implements FromCollection
{

    public function collection()
    {
        return Tbcall::where('Row_Id',14407)->get();
    }
}

?>

React code:

  exportReporttoCsv(params){
    this.setState({ isDataFetched: true }, async () => {
  
  let productsData = await this.apiService.exportCsvReport(params);
  
  const url = window.URL.createObjectURL(new Blob([productsData.data]));
  const link = document.createElement('a');
  link.setAttribute('href', 'data:text/csv');
  link.href = url;

  link.setAttribute('download', 'aaa1.csv'); //or any other extension

  document.body.appendChild(link);
  link.click();

  });
  }

Output:

Tried in notepad as well. Still shows the encoded data.

File is getting downloaded but when opening the file shows like these.

Not getting what is going wrong. What changes are needed here ? Any answers will be appreciated. Thanks

via Chebli Mohamed