我正在使用MUI的autocomplete组件来显示我的一些对象作为建议。一切都运行良好，但我在文本字段（renderInput内部）中放置了一个化身作为开始装饰，我希望将所选内容的相应图像属性值放置在此处。

我想要的：我希望无论在自动完成中选择了什么值，（在我的对象中有一个image属性，它的数组被Map到 autocomplete 的optionsprop）。因此，我需要相应的图像，以及选项标签（在文本字段内），则相应的图像也应显示在startAdorment内。* 我希望它类似于LinkedIn的公司字段，我们在发布新工作时会填写该字段。*

这是我的MUI自动完成，我是新的' typescript '。

<Autocomplete
         open = {open}
         onOpen = {() => setOpen(true)}
         onClose = {() => setClose(true)}
         options = {items.sort((a, b) => -b.name.localeCompare(a.name))}
         isOptionEqualToValue = {(option, value) => option.name === value.name}
         getOptionLabel = {(option : any) => option.name}
         renderInput = {(params : any ) => (
           <TextField
            {...params}
            className = {'inputField'} 
            placeholder = {'Enter item name'}
            label = {'items'}
            InputProps = {{
              ...params.InputProps,
              startAdornment : ( <Avatar src = {params.image} /> ) 
             }} />
         )}
         renderOption = {(props, option) => {

          return (
            <li
             key = {option.id}
             {option.name}
            </li> )}} />

所以我希望无论名字是从自动完成中选择的，它的对应图像应该显示到化身中（在开始装饰里面）。2如何实现呢？
是的，这是我的对象数组，就像-

[{ id : number, name : string, image : string }, {...}, {...}, and so on...];

• image这里是图像的url，（我希望显示到startAdorment里面的头像。）*
• 是否需要为此提供新状态？*

所有的建议都会被接受，急切地寻找合适的答案。