如何在ag-grid-react中禁用或删除输入搜索过滤器？

const columnDefs = [
  { headerName: "ID", field: "id", filter: false },
  { headerName: "Value", field: "value" }
];

import React, { useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

const GridExample = () => {
  const gridRef = useRef(null);

  const onGridReady = (params) => {
    gridRef.current = params.api;
  };

  const disableFilters = () => {
    if (gridRef.current) {
      gridRef.current.setFilterModel(null);
    }
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <button onClick={disableFilters}>Disable Filters</button>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        onGridReady={onGrid睡醒}
      />
    </div>
  );
};

export default GridExample;

.ag-filter-input-wrapper {
  display: none !important;
}

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

const CustomFilter = ({ onFilterChanged }) => {
  const [filterValue, setFilterValue] = useState('');

  const handleChange = (event) => {
    setFilterValue(event.target.value);
    onFilterChanged(event.target.value);
  };

  return (
    <input
      type="text"
      value={filterValue}
      onChange={handleChange}
      style={{ display: 'none' }} // 控制显示和隐藏
    />
  );
};

const columnDefs = [
  {
    headerName: "Value",
    field: "value",
    filterFramework: CustomFilter,
  },
];

const GridExample = () => {
  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 602 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
};

export default GridExample;