React project - Material UI Data grid display nested array object in a cell

I have been trying to create a Material Data Grid to display the number of users and the roles assigned to them.

The data structure looks like:

1. User 1: {admin, seller}
2. User 2: {admin}
3. User 3: {admin, seller, user}

The json response from the api for the users object looks like:

users: [
{
        "id": 7,
        "email": "[email protected]",
        "phone": "+91-9686660322",
        "firstName": "Ankur",
        "lastName": "Jhavery",
        "avatar": "http:img.bb/123we",
        "verified": false,
        "createdAt": "2022-04-07T16:09:35.000Z",
        "updatedAt": "2022-04-07T16:09:35.000Z",
        "roles": [
            {
                "id": 1,
                "roleName": "admin",
                "userRoles": {
                    "createdAt": "2022-04-07T16:09:35.000Z",
                    "updatedAt": "2022-04-07T16:09:35.000Z",
                    "roleId": 1,
                    "userId": 7
                }
            },
            {
                "id": 2,
                "roleName": "seller",
                "userRoles": {
                    "createdAt": "2022-04-07T16:09:35.000Z",
                    "updatedAt": "2022-04-07T16:09:35.000Z",
                    "roleId": 2,
                    "userId": 7
                }
            },
            {
                "id": 3,
                "roleName": "user",
                "userRoles": {
                    "createdAt": "2022-04-07T16:09:35.000Z",
                    "updatedAt": "2022-04-07T16:09:35.000Z",
                    "roleId": 3,
                    "userId": 7
                }
            }
        ]
    }
    ]

I am trying to render it in a React component:

const getFullName = (params) => {
  return `${params.row.firstName || ''} ${params.row.lastName || ''}`;
};

const columns = [
  { field: 'id', headerName: 'Id', width: 50 },
  {
    field: 'fullName',
    headerName: 'Full Name',
    width: 150,
    valueGetter: getFullName,
  },
  { field: 'email', headerName: 'Email', width: 150 },
  { field: 'phone', headerName: 'Phone', width: 150 },
  { field: 'verified', headerName: 'Verified', width: 150 },
  {
    field: 'roles',
    headerName: 'Roles',
    width: 150,
    valueFormatter: (params) => params.value.roleName,
    type: 'string',
  },
];

const Users = () => {
  const [users, setUsers] = useState([]);

  const getAllUsers = async () => {
    try {
      const response = await axios.get(
        'http://localhost:8000/api/v1/admin/users'
      );

      if (response) {
        const users = response.data.users;
        setUsers(users);
      }
    } catch (err) {
      console.log(`Error: ${err}`);
    }
  };

  useEffect(() => {
    getAllUsers();
  }, []);

  return (
    <div className="p-5">
      Users
      <div className="flex flex-grow w-[60rem] h-[20rem]">
        <DataGrid rows={users} columns={columns} />
      </div>
    </div>
  );
};

export default Users;

However, the output is still showing as [Object, object]

The output that I am willing to produce for the Roles cell is to get an array of string objects which I can then display as a list using:

<ul className='flex'>
      {roles.map((role, index) =>(
        <li key={index}>{role}</li>
      ))}
</ul>