how to hide a row in mui data grid

I have a data grid using MUI. I want to hide a few rows and not display them based on a given condition and if a particular value exists in a column. How do I hide it? There seems to be props such as

hide

for columns but there is nothing for rows. EDIT The code is as follows I want to hide the row from being displayed if a value exists in the 4th column (field: 'recvDistLocId') and I want to hide the rows only when I press a button in the toolbar. So basically, its like a filter. Initially, all the data should be displayed and if I click the button, all rows with a value in the 4th column should disappear.

const columns = []
columns.push({
      field: 'code',
      headerName: nowrapHeader(appLanguages.serialCode[lang]),
      flex: 1,
      getApplyQuickFilterFn: getApplyFilterFnSameYear
    });

    columns.push({
      field: 'brandId',
      headerName: nowrapHeader(appLanguages.brand[lang]),
      renderCell: (params) =>
        getSelectCustomBodyRender(this.getBrandOptionMap(), params.row.brandId),
      flex: 1,
    });

    columns.push({
      field: 'slip',
      headerName: nowrapHeader(appLanguages.slipNum[lang]),

      renderCell: (params) => this.getSlipText(params.row.slip),

      flex: 1,
    });
columns.push({
      field: 'recvDistLocId',
      headerName: 'RecvDistLocId',
      flex: 1,
      hide: true,
    });


/////This is the main data grid element code in the render()

<div style={{ height: 640, width: '100%' }}>
            <DataGrid
              sx={{
                '& .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainer': {
                  display: 'none',
                },
              }}
              rows={serialsList || []}
              columns={columns}
              rowsPerPageOptions={[25, 50, 100]}
              checkboxSelection={this.state.cancelShipFlag ? true : false}
              disableSelectionOnClick={false}
              components={{
                Toolbar: NewToolbar,
              }}
              onSelectionModelChange={(ids) => {
                const selectedIDs = new Set(ids);
                const selectedRows = rowData.filter((row) => selectedIDs.has(row.id));

                this.setState({ rowinfo: selectedRows });
                this.setState({ selectedrows: ids });
                //console.log('Selected rows: ' + this.state.selectedrows);
              }}
              selectionModel={this.state.selectedrows}
            />
          </div>