Unable to edit cells in row and the alignment is taking a toss

[NiharikaSrinivasa]

version details :
"react": "^18.3.1",
"react-data-grid": "^7.0.0-beta.46",

code :
import React, { useState } from "react";
import DataGrid from "react-data-grid";
import "react-data-grid/lib/styles.css";
const App = () => {
const [rows, setRows] = useState([
{ id: 1, title: "Row 1", count: 20 },
{ id: 2, title: "Row 2", count: 40 },
{ id: 3, title: "Row 3", count: 60 },
]);

const columns = [
{ key: "id", name: "ID" }, // Not editable
{ key: "title", name: "Title", editable: true }, // Editable column
{ key: "count", name: "Count", editable: true }, // Editable column
];

const rowKeyGetter = (row) => row.id;

const handleRowsChange = (updatedRows, { indexes }) => {
console.log("Updated Rows:", updatedRows); // Debug: Log the new rows
const newRows = [...rows];
indexes.forEach((index) => {
newRows[index] = { ...newRows[index], ...updatedRows[index] };
});
setRows(newRows); // Update state
};

return (
<div style={{ height: 300 }}>


);
};

export default App;

Kindly help me with documentation to utilise the features of react-data-grid with react 18 version.

[amanmahajan7]

Can you create a reproducible example?