How to get distinct values from an array of objects in JavaScript

const data = [
  {
    id: 1,
    category: 'fruit',
    name: 'Apple',
  },
  {
    id: 2,
    category: 'fruit',
    name: 'Banana',
  },
  {
    id: 3,
    category: 'herb',
    name: 'Basil',
  },
  {
    id: 4,
    category: 'herb',
    name: 'Rosemary',
  },
  {
    id: 5,
    category: 'fruit',
    name: 'Dragon Fruit',
  },
];

 var categories = data.map( // try to retrieve specific property
        function(item) {
          return item.category;
        }) // Distinct
        .filter(function(item, index, arr){
          return arr.indexOf(item) === index;
        }) // sort
        .sort();

 const categories = [...new Set(data.map(x => x.category ))];