ReactJS中使用useState管理MUI DataGrid列导致组件功能异常的问题求助

我照着官方的编辑示例做了一个DataGrid组件，但没有用let直接定义列，而是改用useState来管理列的状态，代码大概是这样的：

function browser({params}) {
    const [columns, setColumns] = useState([]);

    useEffect(() => {
        let cols = prepareColumns(selectedColumns, primaryKey);
        setColumns(cols);
    }, []);
    ...

    return (
     <DataGrid
        rows={rows}
        columns={columns}
        ...
     />
    );
}

结果出现了很奇怪的问题：操作列上的编辑按钮完全没法正常工作，执行删除操作的时候整行直接就消失了。我实在搞不清到底哪里出问题了，但我必须用React状态来管理列，因为之后要在运行时动态插入更多列。

备注：内容来源于stack exchange，提问作者GanderopTM