I am using the WidgetCell component like this:

Code:
import React, { Component } from 'react';
import { Dialog, Button } from '@sencha/ext-react'
import { Grid, Column, WidgetCell } from '@sencha/ext-modern';

..........
state = {
        showDialog: false
}


editHandler = (value, record) => {
        Ext.toast(`User ID: ${record.get('id')}`);
        this.setState({ showDialog: true });
}
.........
<Grid 
       title="Users" 
       store={this.props.store}
>
   <Column text="Edit">
        <WidgetCell>
               <Button text="Edit" handler={this.editHandler} />
         </WidgetCell>
    </Column>
</Grid>
The problem is that I can not get the record parameter in my editHandler method.

If I try to use renderer instead of WidgetCell like this:

Code:
<Column renderer={(value, record) => {
        return <button onClick={this.editHandler} >Edit</button>
}} />
I get the record parameter, but the problem in this case is that I can not use the Button component inside renderer and I am forced to use plain html button element.
If I try and use <Button /> component I get this error:

Code:
Warning: <Button /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    in Button
I get the exact same error when I nest component inside <Modal /> component.

please help me fix these.