material-ui How to trigger the table column drag and drop function?

According to the official documentation, I used DataGridPro to make a table, but when I need to trigger the response after the table is dragged, I can't get it. I have tried multiple methods from the official documentation, but none of them worked.

const columns: GridColDef[] = [
    {id: 1, field: "id", headerName: "ID"}
]
<DataGridPro
  rows={this.props.data}
  density="compact"
  columns={columns}
  pageSize={this.props.pageSize}
  rowsPerPageOptions={[25, 30, 50, 100, 200, 500]}
  // checkboxSelection
  headerHeight={50}
  // autoHeight={true}
  loading={this.props.isLoading}
  rowCount={this.props.rowCount}
  paginationMode='server'
  onPageChange={(page) => this.useQuery(page)}
  onPageSizeChange={pageSize => this.changePageSize(pageSize)}
  columnVisibilityModel={columnVisibilityModel}
  disableMultipleSelection={false}

  // These properties do not take effect, am I doing something wrong?
  columnHeaderDragStart={(e) => {console.log('test')}}
  columnHeaderDragEnter={(e) => {console.log('test')}}
  columnHeaderDragOver={(e) => {console.log('test')}}
  columnHeaderDragEnd={(e) => {console.log('test')}}
  onRowOrderChange={(e) => {console.log('test')}}
  onColumnheaderDragEnd={() => {console.log('columnHeaderDragEnd test')}}
  RowDragEnd={() => {console.log('rowDragEnd test')}}

  rowReordering
  // onColumnHeader

  pagination={true}
  components={{
      LoadingOverlay: LinearProgress,
      NoRowsOverlay: CustomNoRowsOverlay,
      Toolbar: APIToolBar,
  }}
  columnBuffer={3}
  columnThreshold={3}
/>