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:

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