Not able to edit a column header. Tried multiple ways

Describe the bug

Want to edit column names in the table.

Not able to make the columns editable. Tried multiple examples, but no luck.

To Reproduce

1. Define columns with variables editable & editor
2. Include columns in the grid

Code example:

`import React, { useState } from "react";
import DataGrid, { textEditor } from "react-data-grid";

const Grid = () => {

interface Row {
id: number;
title: string;
}

const columns = [
{
key: "id", name: "ID", editable: true, editor: textEditor
},
{
key: "title", name: "Title", editable: true, editor: textEditor
}
];

function createRows(): Row[] {
return [
{ id: 0, title: "Example" },
{ id: 1, title: "Demo" }
];
}

const [rows, setRows] = useState(createRows);
const [selectedRows, setSelectedRows] = useState<ReadonlySet>(() => new Set());

const rowKeyGetter = (row: Row) => {
return row.id;
};

return ( <DataGrid
rowKeyGetter={rowKeyGetter}
columns={columns}
rows={rows}
selectedRows={selectedRows}
onSelectedRowsChange={setSelectedRows}
onRowsChange={setRows}
className="fill-grid" />
);
};

export default Grid;
`

Expected behavior

Environment

• react-data-grid version: Tried 7.0.0-beta.16 & 7.0.0-beta.19
• react/react-dom version: 18.2.0

Additional context