Repository: material-ui
Issue: @mui/material/styles exports incorrectly typed function when using styled-engine-sc and typescript
Labels: new feature,package: styled-engine-sc

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

When using styled-components and TypeScript, `import { styled } from '@mui/material/styles'` imports  an object of type `CreateMUIStyled<Theme>`.  This type indicates support of the accessor styled-components syntax for styling elements (`styled.div`, `styled.span`, etc.) but the actual export only supports function syntax  (`styled('div')`, `styled('span')`, etc.)

✅ This works:
```
import { styled } from '@mui/material/styles';

const Red = styled('div')`
  color: red;
`;

// 💯
```

🙈 This does not work:
```
import { styled } from '@mui/material/styles';

const Red = styled.div`
  color: red;
`;

// TypeError: _mui_material_styles__WEBPACK_IMPORTED_MODULE_6__.styled.div is not a function
```
![image](https://user-images.githubusercontent.com/43940590/142148156-bf271d9d-fb51-41e8-befd-8da8566e82dc.png)


### Expected behavior 🤔

Either accessor syntax works or the `CreateMUIStyled<Theme>` type should indicate that the `styled` export is a function, not an object with accessor properties.

### Steps to reproduce 🕹

Steps:

1. Clone and install dependencies in [the example cra with styled-components and typescript](https://github.com/andyGallagher/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript)
2. Try creating a styled component that is a `styled('div')`, it will work.
3. Try creating a styled component that is a `styled.div`, it will not work.


### Context 🔦

We are looking to introduce material UI to our existing codebase that uses TypeScript and styled-components.  It is a must that styled-components work and the types match the exported object.

### Your environment 🌎

<details>
  <summary>`npx @mui/envinfo`</summary>

```
System:
    OS: macOS 10.15.7
  Binaries:
    Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.8.0/bin/yarn
    npm: 7.21.0 - ~/.nvm/versions/node/v16.8.0/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1.3
  npmPackages:
    @mui/base:  5.0.0-alpha.55 
    @mui/lab: latest => 5.0.0-alpha.55 
    @mui/material: latest => 5.1.1 
    @mui/private-theming:  5.1.1 
    @mui/styled-engine:  5.1.1 
    @mui/styled-engine-sc: latest => 5.1.0 
    @mui/system:  5.1.1 
    @mui/types:  7.1.0 
    @mui/utils:  5.1.1 
    @types/react: latest => 17.0.35 
    react: latest => 17.0.2 
    react-dom: latest => 17.0.2 
    styled-components: latest => 5.3.3 
    typescript: latest => 4.4.4 
```

tsconfig.json
```
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react-jsx",
    "noEmit": true,
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "skipLibCheck": false
  },
  "include": [
    "src/**/*"
  ]
}
```
</details>