Laravel Search Between $from and $to date not working

In my Laravel-5.8, I have this code:

Controller:

    if ($request->isMethod('post'))
    {
        $from = $request->input('from');
        $to   = $request->input('to');
        if ($request->has('search'))
        {
            // select search
            $searchReports = DB::table('hr_leave_requests AS lr')
                    ->join('hr_leave_types AS lt', 'lr.leave_type_id', '=', 'lt.id')
                    ->join('hr_employees AS em', 'lr.employee_id', '=', 'em.id')
                    ->where('lr.leave_status', 4)
                    ->where('lr.company_id', $userCompany)
                    ->whereBetween('lr.commencement_date', [$from, $to])
                    ->select('em.employee_code',DB::raw("CONCAT(em.first_name,' ',em.last_name) as full_name"),'lr.commencement_date','lr.resumption_date','lr.no_of_days','lt.leave_type_name')
                    ->get();
            return view('report.leave_reports.hr_leave_taken_by_date_report',['searchReports' => $searchReports]);
        }

This is the view blade:

< script type = "text/javascript" >
  //        $(document).ready(function() {
  $(function() {
    $('.fromDate').datepicker({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),

    });

  }); <
/script>

<form action="{{route('reports.leaveReport')}}" method="POST" class="form-horizontal" enctype="multipart/form-data">
  @csrf
  <div class="container">
    <div class="row">
      <label for="from" class="col-form-label">From:</label>
      <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
          </div>
          <input type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="from" class="form-control fromDate">
        </div>
      </div>
      <label for="from" class="col-form-label">To:</label>
      <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
          </div>
          <input type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="to" class="form-control fromDate">
        </div>
      </div>

      <div class="col-md-4">
        <button type="submit" class="btn btn-primary btn-sm" name="search">Search</button>

      </div>
    </div>
  </div>
</form>

Route:

    Route::get('reports/leaveReport', 'LeaveReportsController@leaveReport')->name('reports.leaveReport');
    Route::post('reports/leaveReport', 'LeaveReportsController@leaveReport')->name('reports.leave');

I am using JQuery-UI datepicker.

I am using commencement_date for $from and $to. As I select #from and $to and submit, I expect it to filter according to the selected date, but nothing is displayed.

If I remove the $from and $to and load it directly on the view blade, it works fine.

How do I resolve this?

Thanks