React Mui DataGrid - insert line break when text inside row hits max width

I have a table that I created using MUI DataGrid, and I am storing some user input. My issue is, if the text input is too big, the text will truncate showing "..." at the end. What I'm trying to achieve is to break the line inside that column if the text is too big, here is the example.

I want the text to be broken into more lines if it hits the end of the column.

Here is my code:

const columnData: GridColDef[] = [
    {
      field: "createdAt",
      headerName: "DATE",
      minWidth: 150,
      width: 244,
      valueFormatter: (params: GridValueFormatterParams) =>
        dateString(DateTime.fromSeconds(params.value as number).toJSDate()),
    },
    {
      field: "content",
      headerName: "NOTE",
      minWidth: 600,
      width: 1150,
    },
    {
      field: "note-menu-button",
      disableColumnMenu: true,
      sortable: false,
      headerName: "",
      width: 0,
      renderCell: (params) => {
        return (
          <ActionMenu
            id="note-menu-button"
            menuItems={menu}
            rowId={params.id}
          />
        );
      },
    },
  ];
return (
    <Table
      {...props}
      columns={columnData}
      rowHeight={55}
      autoHeight
      pageSize={6}
    />
  );
};

Here is where I load the table:

<Card id="notes-table" sx={{ mb: 4 }}>
        <CardContent>
          <NotesTable
            onNotesEditClick={(id: string) => {
              openEditNoteDialog(id);
            }}
            onNotesDeleteClick={(id: string) => {
              onDeleteNote(id);
            }}
            rows={notes}
            loading={loading}
          />
        </CardContent>
      </Card>