文本字段一类型和停止 MUI Material

我使用了Material UI的Texfield，但是我注意到一个问题，每次我输入一个字母后就停下来，然后我必须再次点击它才能继续输入...，但是当我移除onChange方法时，数据就可以连续输入而不停止...这是因为useEffect组件阻止了连续输入吗？

以下是我的代码：

import React from "react";
import { Search } from "@mui/icons-material";
import { IconButton, TextField, InputAdornment } from "@mui/material";
import {
  GridToolbarDensitySelector,
  GridToolbarContainer,
  GridToolbarExport,
  GridToolbarColumnsButton,
} from "@mui/x-data-grid";
import FlexBetween from "./FlexBetween";
const DataGridCustomToolbar = ({ searchInput, setSearchInput, setSearch }) => {
  return (
    
      
        
          
          {/*  */}
          
        
         setSearchInput(e.target.value)}
          value={searchInput}
          variant="standard"
          InputProps={{
            endAdornment: (
              
                 {
                    setSearch({ value: searchInput });
                    setSearchInput("");
                  }}
                >
                  
                
              
            ),
          }}
        />
      
    
  );
};
export default DataGridCustomToolbar;

这是在datagrid上使用它的代码：

const BOM = () => {
  const theme = useTheme();
  // values to be sent to the backend
  const [page, setPage] = useState(0);
  const [limit, setlimit] = useState(20);
  const [order, setOrder] = useState([
    {
      column: "1",
      dir: "asc",
    },
  ]);
  const [search, setSearch] = useState({
    value: "",
  });
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);
  const setDataInput = (value) => {
    setDataInput(value);
  };
  useEffect(() => {
    dataService.getBomList(page, limit, order, search).then((response) => {
      console.log("BOM");
      setData(response.data.data.data);
      setTotal(response.data.data.recordsFiltered);
      return response.data.data.data;
    });
  }, [page, limit, order]);
  console.log(data);
  const [searchInput, setSearchInput] = useState("");
  const columns = [
    {
      field: "sku",
      headerName: "SKU",
      width: 100,
    },
    { field: "sku_name", headerName: "SKU名称", width: 300 },
    {
      field: "plant",
      headerName: "厂区",
      width: 80,
      align: "center",
      headerAlign: "center",
    },
    { field: "base_qty", headerName: "基础数量", width: 100 },
    {
      field: "item",
      headerName: "物料",
      width: 60,
      align: "center",
      headerAlign: "center",
    },
    { field: "uom_sku", headerName: "物料单位", width: 100, align: "center" },
    { field: "material", headerName: "材料", width: 150 },
    { field: "material_name", headerName: "材料名称", width: 300 },
    { field: "qty_material", headerName: "材料数量", width: 100 },
    { field: "uom_material", headerName: "材料单位", width: 100 },
    { field: "alt_bom", headerName: "BOM ALT", width: 80 },
    { field: "valid_from", headerName: "有效期从", width: 210 },
    { field: "valid_to", headerName: "有效期至", width: 210 },
    { field: "status", headerName: "状态", width: 80 },
  ];
  return (
    
      
        {console.log("data", order, page, limit, search, searchInput)}
         row.id}
          columns={columns}
          rowCount={(limit && total) || 0}
          rowsPerPageOptions={[20, 50, 100]}
          rows={data || []}
          pagination
          paginationMode="server"
          sortingMode="server"
          page={page}
          pageSize={limit}
          onPageSizeChange={(newPageSize) => setlimit(newPageSize)}
          onPageChange={(newPage) => setPage(newPage)}
          onSortModelChange={(newSortModel) => setOrder(...newSortModel)}
          components={{ Toolbar: DataGridCustomToolbar }}
          componentsProps={{
            toolbar: { searchInput, setSearchInput, setSearch },
          }}
        />
      
    
  );
};
export default BOM;

有人可以告诉我我在这里做错了什么吗...