Custom headers not working about react-smart-data-table HOT 4 CLOSED

const headers = {
  _id: {
    text: 'Id',
    invisible: true,
    sortable: false,
    filterable: false
  },
  title: {
    text: 'Title',
    invisible: false,
    sortable: true,
    filterable: true
  },
  firstName: {
    text: 'First Name',
    invisible: false,
    sortable: true,
    filterable: true
  },
  lastName: {
    text: 'Last Name',
    invisible: false,
    sortable: true,
    filterable: true
  },
  fullName: {
    text: 'Full Name',
    invisible: false,
    sortable: true,
    filterable: true
  },
  postCode: {
    text: 'Post Code',
    invisible: false,
    sortable: true,
    filterable: true
  },
  email: {
    text: 'Email',
    invisible: false,
    sortable: true,
    filterable: true
  },
  uniqueReference: {
    text: 'Unique Reference',
    invisible: false,
    sortable: true,
    filterable: true
  },
  placeholder: {
    text: 'Placeholder',
    invisible: false,
    transform: () => {
      return (
        <button onClick={() => console.log("the button worked")}>
          Show Details
        </button>
      )
    }
  }
}

<SmartDataTable
  data={data}
  headers={headers}
  name='test-table'
  filterValue={filterValue}
  perPage={perPage}
  sortable
  withLinks
  withHeader
  loader={(
    <div>Loading ...</div>
  )}
/>