How to get row objects on checkbox selection in React MUI DataGrid

i'm getting Data from API and displaying it using React MUI DataGrid. I have enabled check box selection and I want to get the specific cell items of the selected row and save them in a list.

For Example in the image below, if I click on the checkbox for the 1st row I want to get the "Article" added in a list and then if I click on the 2nd row I want "Article" of 2nd row added in the existing list. Below is my current code:

<DataGrid
        className="dataGrid"
        rows={data}
        columns={userColumns.concat(actionColumn)}
        pageSize={9}
        rowsPerPageOptions={[9]}
        checkboxSelection
        onSelectionModelChange={(id) => {
          console.log(id);
          console.log(data);
          const selectedRows = data.rows.filter((row) => row.i);
          console.log(selectedRows);
        }}
      />

My try: I tried to get the whole row objects, i used the original rows data and filter the others based on the selected ids.

However, this code throw error:

Uncaught TypeError: Cannot read properties of undefined (reading 'filter')

I'm not sure how to get current Location's value for the selected rows and add it to a list.