Can't use IconComponent to set a custom icon for Select Components

I am trying to change the default icon used for a select drop down by setting IconComponent to a string in the props for the select component but I get the error: React does not recognize the IconComponent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase iconcomponent instead. If you accidentally passed it from a parent component, remove it from the DOM element.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The icon should get set to the icon provided in the props.

Current Behavior

I get the error: React does not recognize the IconComponent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase iconcomponent instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Steps to Reproduce (for bugs)

const selectFieldProps = {
      autoWidth: true,
      IconComponent: "<i className='material-icons'>more_vert</i>"
}
<Select
   value={this.state.depth} 
   onChange={this.handleChange}
   inputProps={{
      name: "depth",
      id: "depth"
    }}
    {...selectFieldProps}
>
    {children}
</Select>

Context

Your Environment