Cannot connect store to the grid having nested json data on ExtReact

[MicheleV]

Like you can see I have nested data and the reader is not able to access or to find the 'groupData' property, I think that the reader isn´t working like it should, because if I only had the objects (so { ReportMonth, CountBackupVM... }) then it works and in this case I wouldn´t need the reader. I also tried to make an ajax request saving the data locally and I have the same problem, could someone help me with this issue?

import React, {Component} from 'react';
import {launch} from '@sencha/ext-react';
import {ExtReact} from '@sencha/ext-react';
import {Container, Panel, Grid, Column} from '@sencha/ext-modern';


class App extends Component {
    store = Ext.create('Ext.data.Store', {
        fields: ['ReportMonth', 'CountBackupVM', 'CountBackupWKS', 'CountBackupSRV', 'CountBackupO365'],
        data: [{
            "groupData": [
                {
                    "ReportMonth": "March 2019",
                    "CountBackupVM": "160",
                    "CountBackupWKS": "7",
                    "CountBackupSRV": "0",
                    "CountBackupO365": "0"
                }, {
                    "ReportMonth": "February 2019",
                    "CountBackupVM": "155",
                    "CountBackupWKS": "7",
                    "CountBackupSRV": "0",
                    "CountBackupO365": "90"
                }, {
                    "ReportMonth": "January 2019",
                    "CountBackupVM": "156",
                    "CountBackupWKS": "4",
                    "CountBackupSRV": "0",
                    "CountBackupO365": "89"
                }
            ]
        }],
        reader: {
            type: 'json',
            rootProperty: 'groupData'
        }
    });


    render() {
        return (
            <ExtReact>
                <Container layout="fit"
                    padding={10}
                    fullscreen >
                    <Panel title="ExtReact"
                        bodyPadding={10}
                        shadow >
                        <Grid store={this.store}>
                            <Column text="Report month"
                                dataIndex="ReportMonth"
                                flex={2}
                                resizable />
                            <Column text="VM"
                                dataIndex="CountBackupVM"
                                flex={3}
                            /><Column 
                                text="Workstation"
                                dataIndex="CountBackupWKS"
                                flex={2}
                                resizable />
                        <Grid /> 
                    <Panel /> 
                <Container /> 
            <ExtReact />
            )
        }
    }
            
launch(<App />);

[mgusmano]

I have looked at this and will need to take this to the Ext JS architect to figure out what the issue is - I will keep you posted

[MicheleV]

Perfect thanks