Unwanted scrollbar in column header of react-data-grid - 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