React-data-grid: setScrollLeft dose not work when customized row renderer being connected with Redux

Question

I'm using customized row renderer feature on my ReactDataGrid, like this:

var RowRenderer = React.createClass({
  setScrollLeft: function(scrollBy) {
    //if you want freeze columns to work, you need to make sure you implement this as apass through
    this.refs.row.setScrollLeft(scrollBy);
  },
 getRowStyle: function() {
   return {
     color: this.getRowBackground()
   }
 },
 getRowBackground: function() {
   return this.props.idx % 2 ?  'green' : 'blue'
 },
 render: function() {
   //here we are just changing the style
   //but we could replace this with anything we liked, cards, images, etc
   //usually though it will just be a matter of wrapping a div, and then calling back through to the grid
   return (<div style={this.getRowStyle()}><ReactDataGrid.Row ref="row" {...this.props}/></div>)
 }
});

var Example = React.createClass({
  render: function() {
    return  (<ReactDataGrid
    columns={columns}
    rowGetter={rowGetter}
    rowsCount={_rows.length}
    minHeight={500}
    rowRenderer={RowRenderer}/>);
  }
});
ReactDOM.render(<Example />, mountNode);

For some reason I need to get the Redux state in the customized row renderer so I tried "connect" it with ReactRedux's connect() function before passing it to ReactDataGrid, like this:

const mapStateToProps = (state) => ({
  foo: 'bar'
});

RowRenderer = connect(mapStateToProps)(RowRenderer);

This works fine, I can now got the Redux store state and render the row accordingly.

However, after connecting, setScrollLeft written in the RowRenderer does not function anymore, which causes the locked column (set as below) no longer appears to be "locked".

var columns = [
{
  key: 'id',
  name: 'ID',
  locked : true
},
...
]

I tried many hacks but nothing worked.

Is there any way to connect Redux with customized row renderer without losing the locked column feature?

Thanks!

--

[Update]

Here is a jsFiddle demonstrating the problem I encountered: https://jsfiddle.net/bluelionet/gpmdr6ur/2/

In JavaScript panel line 109~114, I connected the RowRenderer with Redux. After this, the locked column feature don't work anymore.

If any idea, please comment. Thanks!