Excell File return weird character

I am trying to download excel according to user filtered date value This is my controller

 public function customerExport(Request $request) 
    {
        if($request->date != ''){
            $date = str_replace(',', '', $request->date);
            $segments = explode( 'to', $date );

            $from = date("Y-m-d", strtotime($segments[0]));
            $to = date("Y-m-d", strtotime($segments[1]));
            
        }
        return Excel::download(new CustomerExport($from,$to), 'Customers List.xlsx');
    }
This is my customer export

class CustomerExport implements FromCollection, WithHeadings { protected $from,$to;

function __construct($from,$to) {
        $this->$from = $from;
        $this->$to = $to;
}
/**
* @return \Illuminate\Support\Collection
*/
public function headings(): array
{
    return [
        'Name',
        'IC Number',
        'Email Address',           
        'Mobile Number',           
        'Gender',           
        'Address',           
        'City',           
        'Postcode',                     
        'State',
        'Company Name',
        'Office General Line',
        'Net Salary',
        'Salary Range',
        'Credit Facility',
        'Program',
        'Application Branch',
        'Application Source',
        'Credit Check Status',
        'Device Name',
        'Contract Number',
        'Contract Signed Date',         
        'Created On',
    ];
}

public function collection()
{
    return DataExport::export_all_customer($this->from, $this->to);
}

}

This is the query

static function export_all_customer($from, $to) { return Customer::select( 'customer.name_as_per_nric', 'customer.nric', 'customer.email', 'customer.phone_number', 'customer.gender', 'customer.address', 'customer.city', 'customer.postalcode', 'state.name', 'customer.employment_company_name', 'customer.employment_office_gneral_line', 'finance.net_salary', 'finance.salary_range', 'finance.loan_id', 'program.program_name', 'branch.name as application_branch', 'customer.applicationsource', 'customer_checks.credit_check_result', 'product.product_name', 'customer_contracts.contract_number', 'customer_contracts.contract_date', DB::raw('DATE_FORMAT(customer.created_at, "%Y-%m-%d")')) ->join('order','order.customer_id','=','customer.id') ->join('state','state.id','=','customer.state') ->join('program','program.id','=','order.program_id') ->join('device_program','device_program.sku','=','order.sku') ->join('product','product.id','=','device_program.product_id') ->leftjoin('customer_contracts','customer_contracts.customer_id','=','customer.id') ->leftjoin('finance','finance.order_id','=','order.id') ->join('branch','branch.id','=','order.branch_id') ->leftjoin('customer_checks','customer_checks.customer_id','=','customer.id') ->join('channel_partner','channel_partner.id','=','branch.channel_partner_id') ->whereBetween('customer.created_at', [$from, $to]) ->get(); }

my vue js code is

downloadExcel: function () {

        const posting_ = {                
            date: this.date,
        };

        axios.post(process.env.VUE_APP_API_BASEURL+'customer/export', posting_, {
            file_name: this.fileName
        }, {
            responseType: 'arraybuffer'
        }).then((response) => {
            console.log(response);
            const url = URL.createObjectURL(new Blob([response.data], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }))
            const link = document.createElement('a')
            link.href = url
            link.setAttribute('download', this.fileName)
            document.body.appendChild(link)
            link.click()
        });

    },

Please help