[theme] Fails when combining @chakra-ui/react and @material-ui/core

TypeError: undefined is not a function

It fails here: https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Autocomplete/Autocomplete.js#L340

• The issue is present in the latest release aka alpha
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

<Autocomplete /> component can’t be opened.

Expected Behavior 🤔

<Autocomplete /> should work with chakra and material ui 😃

Steps to Reproduce 🕹

https://codesandbox.io/s/frosty-browser-694e6?file=/src/App.js

Steps:

1. Try to open Autocomplete component

Context 🔦

I am using @material-ui/core and @chakra-ui/react in the same application (which might not be the best but that is a different topic). Looks like with the release of version 5 and some changes to the theme/styling the Autocomplete component broke.

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: macOS 10.15.7
  Binaries:
    Node: 15.12.0 - ~/.nvm/versions/node/v15.12.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v15.12.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.128
    Edge: Not Found
    Firefox: 86.0
    Safari: 14.0.2

[rimiti]

This issue is still present for latest mui and Chakra-ui version. If someone has found a solution, I’m interested.

[caocuong2404]

This is like cake. Move inside the chakra user interface. The problem will be solved. 🐧

import "./styles.css";
import AutoComplete from "@material-ui/core/Autocomplete";
import TextField from "@material-ui/core/TextField";
import { ThemeProvider } from "@material-ui/core/styles";
import { createMuiTheme } from "@material-ui/core/styles";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";

const muiTheme = createMuiTheme();
const theme = extendTheme();

export default function App() {
  return (
    <ChakraProvider theme={theme} resetCSS>
      <ThemeProvider theme={muiTheme}>
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <AutoComplete
            id="combo-box-demo"
            options={[{ title: "a" }, { title: "b" }, { title: "c" }]}
            getOptionLabel={(option) => option.title}
            renderInput={(params) => (
              <TextField {...params} label="Combo box" variant="outlined" />
            )}
          />
        </div>
      </ThemeProvider>
    </ChakraProvider>
  );
}

Sandbox link: https://codesandbox.io/s/eloquent-hopper-e2upeh?file=/src/App.js:0-1026