I have a function component inside which I render AgGrid component as below;

<AgGrid
                        id="dataListGrid"
                        containerProps={{style: {height: gridData.length * 30, minHeight: 180}}}
                        className="customGrid"
                        columnDefs={dataListColumns}
                        frameworkComponents={{checkboxColRenderer: checkboxColRenderer}}
                        gridDescription="List"
                        onGridReady={handleGridReady}
                        rowData={gridData}
                        enableBrowserTooltips={true}
                        pagination
                        paginationPageSize={100}
                        onCellClicked={onCellClicked}
                        onRowSelected={(params) => {
                              params.api.redrawRows({
                                rowNodes: [params.api.getPinnedBottomRow(0)],
                              });
                            }}
                        isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'}
                        fullWidthCellRenderer={CustomPinnedRowRenderer}
                        pinnedBottomRowData={[{}]}
                        {...props}
                    />   

My gridData state is as below;

let gridData = [{
            checked: true,
            fmIdentifier: 'Test data 1',
            category: 'Test',
            comments: 'Test',
            fm: 'Test',
            gti: 'Test data',
            wins: 'Test',
            identifier: 'Test',
            status: 'Test data',
        }, {
            checked: false,
            fmIdentifier: 'Test data 2',
            category: 'Test',
            comments: 'Test',
            fm: 'Test',
            gti: 'Test data',
            wins: 'Test',
            identifier: 'Test',
            status: 'Test data X',
            rowPinned: 'bottom'
        }]

Now the checkboxColRenderer is as below;

import React from 'react';

export default (props) => {
    return (
        <span>
            <input type="checkbox" checked={props.data.checked} />
        </span>
    );
};

Thus for each of the rows, a checkbox is rendered and I want to sync the state with the parent/main function component I am trying to somehow get the parent state from inside checkboxColRenderer i.e on the props object. But do not see anything. Any better way to sync the checkbox state with the underlying data i.e. on check/uncheck ?