I am using the WidgetCell component like this:

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 });
   <Column text="Edit">
               <Button text="Edit" handler={this.editHandler} />
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:

<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:

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.