ColumControl ccSearchClear Not Working in React

TerraX3000

Link to test case: https://stackblitz.com/edit/datatables-net-react-extensions-s3dmoopf?file=src%2FApp.tsx

Error messages shown:

Uncaught TypeError: Cannot read properties of undefined (reading 'isSplit')
at Buttons.disable (chunk-3S63YLI2.js?v=d692a371:191:16)
at Buttons.enable (chunk-3S63YLI2.js?v=d692a371:230:19)
at _Api.<anonymous> (chunk-3S63YLI2.js?v=d692a371:1693:16)
at _Api.each (chunk-4IG36CYP.js?v=d692a371:10294:10)
at _Api.<anonymous> (chunk-3S63YLI2.js?v=d692a371:1692:17)
at _Api.enable (chunk-4IG36CYP.js?v=d692a371:10407:18)
at HTMLTableElement.<anonymous> (datatables__net-colu…?v=67207941:1876:13)
at HTMLTableElement.dispatch (chunk-4IG36CYP.js?v=d692a371:2961:103)
at elemData.handle (chunk-4IG36CYP.js?v=d692a371:2848:116)
at Object.trigger (chunk-4IG36CYP.js?v=d692a371:5106:22)

Description of problem:

I added ColumnControl to the StackBlitz example of the DataTables React component and it worked for filtering column content. However, it crashes when I added ccSearchClear as a button.

Code:

import jszip from 'jszip';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';
import 'datatables.net-buttons-dt';
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-columncontrol-dt';
import 'datatables.net-responsive-dt';
import 'datatables.net-select-dt';

import './App.css';

DataTable.use(DT);
DT.Buttons.jszip(jszip);

function App() {
  const columns = [
    { data: 'name' },
    { data: 'position' },
    { data: 'office' },
    { data: 'extn' },
    { data: 'start_date' },
    { data: 'salary' },
  ];

  return (
    <>
      <div>
        <h1>Using DataTables Extensions</h1>
        <h2>DataTables + React example</h2>
        <p>
          This example demonstrates the <code>datatables.net-react</code>
          package being used with DataTable's events through <code>
            on*
          </code>{' '}
          properties on the component.
        </p>
        <p>
          Full documentation for the DataTables React component is{' '}
          <a href="https://datatables.net/manual/react">
            available in the DataTables manual
          </a>
          .
        </p>

        <DataTable
          ajax="/data.json"
          columns={columns}
          className="display"
          options={{
            responsive: true,
            select: true,
            columnControl: ['order', 'searchDropdown'],
            layout: {
              topStart: { buttons: ['pageLength', 'excel', 'ccSearchClear'] },
            },
            ordering: {
              indicators: false,
            },
          }}
        >
          <thead>
            <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Office</th>
              <th>Extn.</th>
              <th>Start date</th>
              <th>Salary</th>
            </tr>
          </thead>
        </DataTable>
      </div>
    </>
  );
}

export default App;