如何让MaterialUI XGrid filters按照renderCell参数而不是后端数据进行过滤？

import { XGrid } from '@material-ui/x-grid';

function MyGrid() {
  return (
    <XGrid
      filterMode="client"
      // other props
    />
  );
}

const rows = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  // other rows
];

// 在每个对象中添加一个用于前端展示的字段
const rowsWithFrontendData = rows.map((row) => ({
  ...row,
  ageString: `${row.age} years old`,
}));

function frontendFilter(filterValue, row, column) {
  // 获取用于前端展示的字段值
  const frontendData = row[`${column.field}String`];

  // 根据前端展示的字段值进行过滤
  return frontendData.toLowerCase().includes(filterValue.toLowerCase());
}

function MyGrid() {
  const columns = [
    { field: 'name', headerName: 'Name' },
    { field: 'age', headerName: 'Age', filterOptions: { customFilter: frontendFilter } },
    // other columns
  ];

  return (
    <XGrid
      columns={columns}
      rows={rowsWithFrontendData}
      filterMode="client"
      // other props
    />
  );
}