3 массива в интерфейсе материалов Автозаполнение

Question

Я делаю поисковый ввод с несколькими предложениями для выбора пользователем. Я использую автозаполнение пользовательского интерфейса материала:

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


export default class Searchbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        searchWord: '',
        collectionOfOptions1: [{ 'name': 'Bob' }, { 'name': 'loby' }, { 'title': 'Ben' }],
        collectionOfOptions2: [{ 'name': 'Heba' }, { 'name': 'bobbby' }],
        collectionOfOptions3: [{ 'title': 'Hammers' }, { 'title': 'Briar on safari' }]
    };
  }

 render() {
    return (
        <Autocomplete
            id="combo-box-demo"
            options={this.state.options}
            getOptionLabel={option => option.title}
            style={{ width: 300 }}
            renderInput={params => <TextField {...params} label="Combo box" 
            variant="outlined" />}
            renderOption={option => (
                <React.Fragment>
                    <span>{option.title}</span>
                </React.Fragment>
            )}
        />
    );
 }
}

Я хочу показать линке коллекций на изображении:

Возможно ли это и как сделать это в интерфейсе материалов автозаполнения?