[solved] Render/Show a custom option in Autocomplete Material UI?

Welcome Back, 
You can show custom render option in the AutoComplete in Material UI using renderOption with React.Fragment

like

 renderOption={(option) => (
 <React.Fragment>
 <Markup content={option.name + `<span style="font-size: 10px !important;">${option.type}<span>`} />
 </React.Fragment> 
 )}

the entire code will looks like 

<Autocomplete
 filterOptions={filterOptions}
 options={this.state.dropdown}
 // getOptionLabel={(option) => { return option.title || '' } }
 groupBy={(option) => option.type}
 getOptionLabel={(option) => option.name || ''}
 renderOption={(option) => (
 <React.Fragment>
 <Markup content={option.name + `<span style="font-size: 10px !important;">${option.type}<span>`} />
 </React.Fragment> 
 )}
 // closeIcon= { () => { return; } }
 renderInput={(params) => (
 <TextField {...params} placeholder="" value={values.search} label="" name="search" />
 )}
 onChange={ (e, obj) => { console.log(obj); setFieldValue('search', obj); } }
/>

Let me know if you have another questions