Repository: material-ui
Issue: [material-ui][Autocomplete] Type issue once wrapped with styled()
Labels: docs,typescript,component: autocomplete,ready to take

I'm trying to use `Autocomplete` with `styled-components` in typescript environment. But when using the component, linter start to complain about styled autocomplete component. I checked for this issue but not sure if it is duplicate. Could not find something related?  

<!-- Checked checkbox should look like this: [x] -->

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

```
No overload matches this call.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<(<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) => Element), DefaultTheme, {}, never>): ReactElement<...>', gave the following error.
    Type '(_event: React.ChangeEvent<{}>, value: OptionData | null) => void | undefined' is not assignable to type '(event: ChangeEvent<{}>, value: unknown, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<unknown> | undefined) => void'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<(<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) => Element), DefaultTheme, {}, never>): ReactElement<...>', gave the following error.
    Type '(data: OptionData) => string' is not assignable to type '(option: unknown) => string'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<(<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) => Element), DefaultTheme, {}, never>): ReactElement<...>', gave the following error.
    Type '(option: OptionData) => boolean' is not assignable to type '(option: unknown, value: unknown) => boolean'.  TS2769
```

```
     62 |   return (
     63 |     <StyledFormControl>
  > 64 |       <StyledAutocomplete
       |       ^
    65 |         id={id}
    66 |         options={options}
    67 |         // classes={classes}
```

I started to add one prop by another then i realised the following:

```tsx
<StyledAutocomplete
        id={id}
        options={options}                                                                          // type of OptionData[]
        onChange={(_event: React.ChangeEvent<{}>, value) =>        // <<== if i set value: OptionData | null linter will complain
          onChange && onChange(value as OptionData | null)
        }
        value={currentValue}
        getOptionLabel={data => (data as OptionData).label}             // <<== if i set data: OptionData | null linter will complain
        getOptionSelected={option =>                                                // <<== if i set option: OptionData | null linter will complain
          (option as OptionData).label === currentValue?.label
        }
        autoHighlight
        renderInput={params => (
          <TextField
            {...params}
            error={!!error}
            name={name}
            label={label}
            variant="standard"
          />
        )}
      />
```


## Expected Behavior 🤔

Would it be possible to take `T` type of the `options` property and pass it throw all function that working with the same type ?

## Steps to Reproduce 🕹

Simply styled `Autocomplete` with `styled-components`.

```tsx
[...]

const StyledAutocomplete = styled(Autocomplete)`
  & .MuiInputBase-root {
    height: 4.1rem;
  }
  & label: {
    fontsize: 2rem;
  }
`;

[....]


<StyledAutocomplete
        id={id}
        options={options}
        // onChange={(_event: React.ChangeEvent<{}>, value: OptionData | null) =>                 // <<== Linter error
        //   onChange && onChange(value)
        // }
        value={currentValue}
        // getOptionLabel={(data: OptionData) => data.label}         // <<== Linter error
        // getOptionSelected={(option: OptionData) =>.                  // <<== Linter error
        //   option.label === currentValue?.label
        // }
        autoHighlight
        renderInput={params => (
          <TextField
            {...params}
            error={!!error}
            name={name}
            label={label}
            variant="standard"
          />
        )}
      />
```

## Context 🔦

As consistency we use `styled-components` as a generic way of styling. We need to use the same here. The styling suggestion works fine using `makeStyles`

## Your Environment 🌎

| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.9.12  |
| React       |    16.13.1     |
| Browser     |    Chrome 83.0.4103.116     |
| TypeScript  |   3.8.0      |
| OS      |    MacOS.     |