I have two DataGrid:

<DataGrid density="compact" disableDensitySelector
    rows={data}
    columns={columns}
    onRowClick={handleRowClick}
    style={{ width: '70%', height: '350px', marginTop: '15px', marginLeft: '10px', marginRight: '15px' }}
    />

<DataGrid density="compact" disableDensitySelector
    rows={teamPerson} //teamPerson will not have values ​​until I click a row in the first grid
    columns={columns2}
    style={{ width: '30%', height: '350px', marginTop: '15px', marginRight: '10px' }}

In my data, I have a column that is a list of strings, that instead of being in the first Grid, I want it to be the data for the second Grid, and when I click a row, I execute the onRowClick of the first Grid:

const handleRowClick = (
    params
) => {
    teamPerson = splitData(params.row.Users);
};

That teamPerson will have the new data that I want to have in the second Grid (the USers column of the data is the one that has the Array).

const columns = [ 
    { headerName: "Team Id", field: "TeamId", width: 200 },
    { headerName: "Team Name", field: "TeamName", width: 200 },
    { headerName: "Email", field: "Email", width: 150 }
]

const columns2 = [
    { headerName: "Team members", field: "user", width: 200 }
]

function splitData(str: any) {
    const response = [];
    let cont = 0;

    str.forEach((element) => teamPerson.push(
        { id: cont++, user: element }
    ));

    return response;
}

How can I access the second grid or update its value?