Сопоставление ключа вложенного объекта с другим ключом

Работая со следующим объектом, как можно добавить roles => name к объекту sites => userPermission с соответствующим roleId?

Например, ключ userPermission первой записи sites будет обновлен до:

 "userPermission": {
   "roleId": 6,
   "roleName": "Field Representative"
 }

После сопоставления ключа roleName больше нет необходимости в массиве roles, и его можно удалить из конечного результата, как показано в ожидаемом результате.

const obj = {
  "id": 542,
  "createdAt": "2018-12-06T22:34:12.553Z",
  "sites": [
    {
      "id": 10,
      "siteId": "sixtysixone",
      "edition": "pro",
      "userPermission": {
        "roleId": 6
      }
    },
    {
      "id": 2,
      "siteId": "amplify",
      "edition": "pro",
      "userPermission": {
        "roleId": 4
      }
    }
  ],
  "roles": [
    {
      "id": 6,
      "name": "Field Representative"
    },
    {
      "id": 4,
      "name": "Program Manager"
    }
  ]
};

Ожидаемый результат:

const outcome = {
  "id": 542,
  "createdAt": "2018-12-06T22:34:12.553Z",
  "sites": [
    {
      "id": 10,
      "siteId": "sixtysixone",
      "edition": "pro",
      "userPermission": {
        "roleId": 6,
        "roleName": "Field Representative"
      }
    },
    {
      "id": 2,
      "siteId": "amplify",
      "edition": "pro",
      "userPermission": {
        "roleId": 4
        "roleName": "Program Manager"
      }
    }
  ]
};

Я попытался использовать комбинацию .map и .find, но чувствую, что есть гораздо более простой/удобочитаемый способ сделать это.

const outcome = obj.map(o => ({
  ...o,
  sites: o.sites
    .map(s => ({
      ...s,
      roleName: o.roles
        .find(r => r.id === s.roleId).name,
   })),
}));