How can I expand new textarea in new row in MUI X Data Grid?

Question

const EditableCell = ({ value, onEditSave }) => {
    const [isEditing, setIsEditing] = useState(false);
    const [editedDescription, setEditedDescription] = useState(value);
    
    const handleEditClick = () => {
    setIsEditing(true);
    };

    const handleSaveClick = () => {
    onEditSave(editedDescription); // Pass the edited description back to the parent component
    setIsEditing(false);
    };
    
    return isEditing ? (
        <div>
            <TextareaAutosize
            value={editedDescription}
            onChange={(e) => setEditedDescription(e.target.value)}
            rowsMin={3}
            />
            <IconButton onClick={handleSaveClick}>Save</IconButton>
        </div>
    ) : (
        <div>
            {value}
            <IconButton onClick={handleEditClick}>
                <EditIcon />
            </IconButton>
        </div>
    );
  };
  
const columns = [
    {
        field: 'id',
        headerName: 'ID',
        width: 100,
    },
    {
        field: 'title',
        headerName: 'Title',
        width: 200,
    },
    {
        field: 'description',
        headerName: 'Description',
        width: 300,
        renderCell: (params) => (
            <EditableCell value={params.value} onEditSave={(editedDescription) => console.log(editedDescription)} />
        ),
    },
];

    const bookmarksData = [
        { id: 1, title: 'Bookmark 1', description: 'Description 1' },
        { id: 2, title: 'Bookmark 2', description: 'Description 2' },
        { id: 2, title: 'Bookmark 2', description: 'Description 2' },
        // ... Add more bookmark data
    ];



const StudentTable=()=>{
    return (
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid
                rows={bookmarksData}
                columns={columns}
                isRowExpandable={(params) => true}
                disableSelectionOnClick
            />
        </div>
    );
};

export default StudentTable;

------ here I have made description editable but i want the edit field to expand in full width of the screen below that same row how can i achieve that

real scenerio is here i am representing bookmarks of a student question where he can save important points for himself so by click edit button I want datagrid to expand new text area below that row show the description in there so that student can edit and save