Unwanted scrollbar in column header of react-data-grid

Question

Issue

In the header of my react-data-grid table, an unwanted scrollbar appears. This doesn't happen for most examples I ahve seen. The scrollbar is unnecessary and distracting.

I've found issues where people want to remove vertical scrollbars, but not one where it just affects the header. I definitely want to KEEP the vertical scrollbars for the data in row 2 and onwards (once it appears), but I do not want a separate little scrollbar in the header.

Example

Please see this codepen for a replication of the issue: https://codesandbox.io/s/gracious-paper-7zo4u?file=/src/App.js:0-690

Code

import React from "react";
import ReactDataGrid from "react-data-grid"; // 6.1.0

const cols = [
  {key: 'a', name: 'alpha', editable: false, sortable: false},
  {key: 'b', name: 'beta', editable: false, sortable: false}
];

const data = [
  {a: 1, b: 1},
  {a: 2, b: 2},
  {a: 3, b: 3}
];

class App extends React.Component {
  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    console.log('CALLED >> onGridRowsUpdated');
  };

  render() {
    return (
      <ReactDataGrid
        columns={cols}
        rowGetter={i => data[i]}
        rowsCount={data.length}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect={true}
      />
    );
  }
}

export default App;

Picture

See right side of the header, it has a mini-scroll bar that is unwanted