Creating a component slot with .create function will not apply styles

[silviuaavram]

Bug Report

Creating a component slot with .create function will not apply styles from the styles file to that slot.

Steps

The code from DropdownLabel.tsx:

      <Label
        styles={styles.root}
        role="presentation"
        circular
        onClick={this.handleClick}
        content={header}
        icon={Icon.create(icon, {
          defaultProps: {
            'aria-label': 'Remove ${header} from selection.',
            'aria-hidden': false,
            role: 'button',
          },
          overrideProps: this.handleIconOverrides,
        })}
        image={Image.create(image, {
          defaultProps: {
            avatar: true,
          },
        })}
        {...rest}
      />

Both Icon and Image will not get styles applied to them from labelStyles.ts.
Both icon and image are shorthands, passed into the Dropdown component. To see the actual bug, go to the Dropdown component in the docs, example Multiple Search with Image and Content.

The line 132 in factories.ts might be the cause of this issue:
if (valIsReactElement) { return value as React.ReactElement<Props> }

Expected Result

Styles should be applied in all cases except when we pass an actual or component to the Dropdown props icon and image.

Actual Result

Styles are not applied.

Version

0.15

[silviuaavram]

Update: The icon is not tabbable anymore either when I used .create function. It gets the listeners from this.handleIconOverrides but it is not accessible by Tab/Shift Tab anymore.
If I use icon={{ name: 'close', onClick: () => {}, }} it will get the cursor: 'pointer' by default and also the tabindex="0" by default.