Making columns via useState in ReactJS MUI DataGrid component makes it unusable

I created a DataGrid component just like in the example from https://mui.com/x/react-data-grid/editing. After creating columns not using let but using useState instead like this:

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

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

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

I get quite weird errors, editing via buttons on action column does not work and deleting makes whole rows disapper. I cannot figure out what is going on. I need columns to have react state because I want to insert some more dynamically in the runtime.

Try using apiRef to dynamically change data in the table, without rerendering.

https://mui.com/x/react-data-grid/api-object/

function browser({params}) {
  const apiRef = useGridApiRef();

  return (
    <div>
      <Button 
          onClick={() => apiRef.current.setRows([{ id: 1, name: 'John' }])}
      >
          Add row
      </Button>
      <DataGrid columns={columns} apiRef={apiRef} {...other} />
    </div>
  );
}