I have above code to reload the datatable in DataTable generic react component.

everything works fine. but I want to clear the datatable before every reload. and the datatable.clear().draw() is not working. in case of 422 validation error the old data remain there filled in the datatable.

 window.DatatableBasic = (function () {

    var initDatatable = function () {
      datatable = $('#datatablebasic')
        .DataTable({
          //options...
        })
        

    return {
      // public functions
      init: function () {
        if (!$.fn.DataTable.isDataTable('#datatablebasic')) {
          initDatatable()
        }
      },
      reload: function () {
        // $('#datatablebasic').Datatable().ajax.reload();
        if (datatable && datatable.ajax) {
          //reset pagination on submit searchButton
          // datatable.clear().draw();
          console.log(datatable)
          $('#datatablebasic').dataTable().fnPageChange(0);
          const count = $('#datatablebasic').DataTable().data().count();
          if (count > 1) {
            datatable.ajax.reload(null, false);
          } else {
            datatable.ajax.reload(null, true);
          }
        } else {
          this.reinit();
        }
      },
      reinit: function () {
        if ($.fn.DataTable.isDataTable('#datatablebasic')) {
          $('#datatablebasic').dataTable().fnDestroy()
        }
        initDatatable()
      },
    }
  })()