如何在数据网格材质 UI 中添加搜索功能？

Question

这是我的代码：

导出默认函数 FilterMenu() {

const [appState, setAppState] = useState({ loading: false,  rows: [] });
const [FilteredData, setFilteredData] = useState({ loading: false,  rows: [] });

const datasource = useEffect(() => {
  setAppState({ loading: true, rows : [] });
  const apiUrl = 'http://127.0.0.1:8000/api/requirement';
  axios.get(apiUrl).then((rows) => {
  
    setAppState({ loading: false, rows: rows.data });
    console.log(rows)
    rows = rows.data;
  });
}, [setAppState]);

console.log(appState.rows)

return(
 <>
 <div className="search">
 <TextField id="standard-basic" label="Search" style={{alignItems:'left'}}/>
 </div>
  <div style={{ height: 400, width: '95%', marginLeft:30}}>
   <DataGrid AllowPaging="true" PageSize="8" OnPageIndexChanging="stockTakeGrid_PageIndexChanging" rows={appState.rows} columns={columns} pageSize={5} checkboxSelection/>
   </div>
   </>
);

}