如何在material-ui中进行分组自动完成

import React from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';

const options = [
  { group: 'Fruits', value: 'Apple' },
  { group: 'Fruits', value: 'Banana' },
  { group: 'Fruits', value: 'Orange' },
  { group: 'Vegetables', value: 'Carrot' },
  { group: 'Vegetables', value: 'Broccoli' },
  { group: 'Vegetables', value: 'Lettuce' },
];

const groupBy = (option) => option.group;

const GroupedAutocomplete = () => {
  return (
    <Autocomplete
      options={options}
      groupBy={groupBy}
      getOptionLabel={(option) => option.value}
      renderInput={(params) => (
        <TextField {...params} label="Grouped Autocomplete" variant="outlined" />
      )}
    />
  );
};

export default GroupedAutocomplete;