Use HOC for CustomGridDetailRow?

Hello,

Is it possible to use functional HOC for CustomGridDetailRow like the one provided in the documentation (below) which is not leading to extra rendering of GridDetailRow?

Or it's a must to use only an instance of React.Component class/GridDetailRow class?

class CustomGridDetailRow extends GridDetailRow {

    render() {

        const detailData = this.props.dataItem.MasterField2;

        return (

            <div> This is detail template with another grid inside it <Grid scrollable="none" data={detailData} /></div>

        );

    }

}

<Grid data={this.state.data} detail={CustomGridDetailRow} >

    <GridColumn field="MasterField1" />

</Grid>

The point is that if I try to use functional HOC inside detail prop (or just a function returning CustomGridComponent) there're some issues with rendering DetailRow (like additional re-rendering during scrolling). It seems that this variable inside detail property should be an instance of React.Component/GridDetailRow class, otherwise Grid component can't perform some internal logic based on lifecycle hooks.

Thanks in advance for any response.