disable ordering on multiple table header rows

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs5/dt-2.0.8/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.8/datatables.min.js"></script>
<body>

<table class="table">
  <thead>
    <tr data-dt-order="disable">
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <th>heading 1</th>
      <th>heading 2</th>
      <th>heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>125445</td>
      <td>125445</td>
      <td>125445</td>
    </tr>
  </tbody>
</table>

</body>

JavaScript

$('table').DataTable({
  columnDefs: [{ orderable: false, targets: 0 }],
  order: [[1, 'asc'], [2, 'asc']],
});