Im currently building a management system that consists of three MUIDataGrids. There is only ever one showing, but you can change between the three Grids by clicking on tabs above.

My setup looks almost identical to the Facebook Ads Manger (Image).

Similiar to the Facebook Ads Manager I want someone to be able to select a row in tab one which has a specific id and then in tab two only display those rows that have the same id.

So I want to filter based on a value. Normally I would do something like this:

            <DataGrid
                rows={rows}
                columns={columns}
                checkboxSelection={true}
                filterModel={{
                    items: [{ columnField: "columnName", operatorValue: "equals", value: valueOfSelectedRowInTabOne }],
                }}
            />

But the issue I have is that users may select multiple rows in tab one meaning I would have to filter based on all the values the selected rows have.

To achieve that I have an array of all the selected row values. But how would I go about filtering based on a whole array? The perfect scenario for me would be to do something like this (Change the filterValue to the whole array):

        <DataGrid
            rows={rows}
            columns={columns}
            checkboxSelection={true}
            filterModel={{
                items: [{ columnField: "columnName", operatorValue: "equals", value: ARRAYofSelctedRowValuesInTabOne }],
            }}
        />

Is there a way to do this with the MUI Data Grid? Am I missing something?

I'd really appreciate any kind of help.

Kind regards, Peter