How to Check if The End Date is Bigger Than The Start Date Using Script in HTML?

// Function to check if the DateFin is Bigger Than The DateDebut
document.getElementById('DateFin').addEventListener('change', function() {
  var dateDebut = document.getElementById('DateFin').value.trim();
  var dateFin = document.getElementById('DateFin').value.trim();

  if (isNaN(dateFin) || dateFin < dateDebut) {
    document.getElementById('error-message').innerText = "The End Date must be greater than or equal to the Start Date";
    document.getElementById('DateDebut').value = "";
    document.getElementById('DateFin').value = "";
  } else {
    document.getElementById('error-message').innerText = "";
  }
});

<div class="mb-3">
  <label for="datadebut" class="form-label text_color">Date de Début :</label>
  <input type="date" class="text_color btn_designBtn bold-border-label form-control" id="DateDebut" name="searchDateDebut" value="{{ $searchDateDebut ?? '' }}">
  <div></div>
</div>

<div class="mb-3">
  <label for="datafin" class="form-label text_color">Date de Fin :</label>
  <input type="text" class="text_color btn_designBtn bold-border-label form-control" id="DateFin" name="searchDateFin" placeholder="jj/mm/yyyy">
  <div id="error-message" style="color: red;"></div>
</div>