Sticky header getting overlapped by scrolling content about react-sticky-table HOT 10 CLOSED

import { StickyTable, Row, Cell } from 'react-sticky-table';
import 'react-sticky-table/dist/react-sticky-table.css';

class Table extends React.Component {
  renderHeader() {
    const { columns } = this.props;
    const headerCells = columns.map(({ title, minWidth }) => (
      <Cell style={{ minWidth }}>{title}</Cell>
    ));

    return (
      <Row>
        {headerCells}
      </Row>
    );
  }

  renderRows() {
    const { data, columns } = this.props;
    const rows = [];

    // create a row for each data item
    for (let i = 0, numRows = data.length; i < numRows; i += 1) {
      const rowData = data[i];
      const cells = [];

      // create cells for each column in the row
      for (let j = 0, numColumns = columns.length; j < numColumns; j += 1) {
        const { key } = columns[j];
        const cellData = rowData[key];
        cells.push(<Cell>{cellData}</Cell>);
      }

      rows.push(<Row>{cells}</Row>);
    }

    return rows;
  }

  render() {
    return (
      <div style={{ width: '100%', height: '150px', background: '#FFFFFF' }}>
        <StickyTable stickyColumnCount={0}>
          {this.renderHeader()}
          {this.renderRows()}
        </StickyTable>
      </div>
    );
  }
}

export default Table;

const data = [
  {
    name: 'Test Name',
    status: 'Test Status',
    something: 'Test Something',
    other: 'Other',
  },
  {
    name: 'Test Name',
    status: 'Test Status',
    something: 'Test Something',
    other: 'Other',
  },
  {
    name: 'Test Name',
    status: 'Test Status',
    something: 'Test Something',
    other: 'Other',
  },
  {
    name: 'Test Name',
    status: 'Test Status',
    something: 'Test Something',
    other: 'Other',
  },
  {
    name: 'Test Name',
    status: 'Test Status',
    something: 'Test Something',
    other: 'Other',
  },
  {
    name: 'Test Name',
    status: 'Test Status',
    something: 'Test Something',
    other: 'Other',
  },
  {
    name: 'Test Name',
    status: 'Test Status',
    something: 'Test Something',
    other: 'Other',
  },
  {
    name: 'Test Name',
    status: 'Test Status',
    something: 'Test Something',
    other: 'Other',
  },
  {
    name: 'Test Name',
    status: 'Test Status',
    something: 'Test Something',
    other: 'Other',
  },
];

const columns = [
  {
    title: 'Name',
    key: 'name',
    minWidth: 250,
  },
  {
    title: 'Status',
    key: 'status',
    minWidth: 225,
  },
  {
    title: 'Something',
    key: 'something',
    minWidth: 250,
  },
  {
    title: 'Other',
    key: 'other',
    minWidth: 100,
  },
];

<div style={{ width: 500 }}>
  <Table data={data} columns={columns} />
</div>

<div class="display-flex">
  <div class="display-flex-cell">
    <div class="display-block" width="100" height="100">
      <StickyTable/>
    </div>
  </div>
</div>