Material-UI -如何在Autocomplete中自定义下拉图标？

import React from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { TextField, ListItemIcon, ListItemText, Avatar } from '@material-ui/core';
import { Person as PersonIcon, LocationOn as LocationOnIcon } from '@material-ui/icons';

const options = [
  { label: 'John Doe', icon: <PersonIcon /> },
  { label: 'Jane Smith', icon: <PersonIcon /> },
  { label: 'New York', icon: <LocationOnIcon /> },
  { label: 'Los Angeles', icon: <LocationOnIcon /> },
];

const CustomOption = ({ label, icon }) => (
  <>
    <ListItemIcon>{icon}</ListItemIcon>
    <ListItemText primary={label} />
  </>
);

const CustomAutocomplete = () => (
  <Autocomplete
    options={options}
    getOptionLabel={(option) => option.label}
    renderOption={(option) => <CustomOption {...option} />}
    renderInput={(params) => <TextField {...params} label="Custom Autocomplete" />}
  />
);

export default CustomAutocomplete;