Element type is invalid in react

I am trying to run this code in code sandbox but it keeps throwing this error.

Error – Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of App.

App.js

import React, { useState } from "react";
import {
  RadioGroup,
  FormControlLabel,
  Radio,
  FormControl,
  Button,
  Grid,
  Typography,
  TextField,
  Autocomplete
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import CloseIcon from "@material-ui/icons/Close";
import { ResizableBox } from "react-resizable";
import "react-resizable/css/styles.css";

const useStyles = makeStyles((theme) => ({
  closeIcon: {
    color: "rgba(0, 0, 0, 0.54)",
    cursor: "pointer",
    "&:hover": {
      color: "rgba(0, 0, 0, 0.87)"
    }
  },
  formWrapper: {
    width: "50%",
    float: "left",
    paddingRight: "20px"
  },
  resizableBox: {
    background: "#f0f0f0",
    border: "1px solid #ddd",
    padding: "10px"
  },
  handle: {
    height: "10px",
    background: "#ddd",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    cursor: "row-resize",
    userSelect: "none",
    "& span": {
      fontSize: "12px"
    }
  }
}));

export default function App() {
  const classes = useStyles();
  const [value, setValue] = useState("option1");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const top100Films = [
    { title: "The Shawshank Redemption", year: 1994 },
    { title: "The Godfather", year: 1972 },
    { title: "The Godfather: Part II", year: 1974 },
    { title: "The Dark Knight", year: 2008 },
    { title: "12 Angry Men", year: 1957 }
  ];

  return (
    <div>
      <div className={classes.formWrapper}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <TextField
              fullWidth
              variant="outlined"
              placeholder="Enter Text"
              InputProps={{
                endAdornment: (
                  <CloseIcon className={classes.closeIcon} fontSize="small" />
                )
              }}
            />
          </Grid>
          <Grid item xs={12}>
            <FormControl component="fieldset">
              <Typography>Select</Typography>
              <RadioGroup value={value} onChange={handleChange}>
                <Grid container spacing={1}>
                  <Grid item>
                    <FormControlLabel
                      value="option1"
                      control={<Radio />}
                      label="Option 1"
                    />
                  </Grid>
                  <Grid item>
                    <FormControlLabel
                      value="option2"
                      control={<Radio />}
                      label="Option 2"
                    />
                  </Grid>
                  <Grid item>
                    <FormControlLabel
                      value="option3"
                      control={<Radio />}
                      label="Option 3"
                    />
                  </Grid>
                  <Grid item>
                    <Button variant="contained" color="primary">
                      Click me!
                    </Button>
                  </Grid>
                </Grid>
              </RadioGroup>
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <Autocomplete
              fullWidth
              multiple
              id="tags-standard"
              options={top100Films}
              getOptionLabel={(option) => option.title}
              renderInput={(params) => (
                <TextField
                  {...params}
                  variant="standard"
                  label="Favorites"
                  placeholder="Favorites"
                />
              )}
            />
          </Grid>
        </Grid>
      </div>
      <ResizableBox
        width={300}
        height={200}
        className={classes.resizableBox}
        resizeHandles={["se"]}
      >
        <div className={classes.handle}>
          <span>Drag here to resize</span>
        </div>
      </ResizableBox>
    </div>
  );
}

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

CodeSandbox link

Can anyone please help me to resolve this issue. Thanks in advance.

>Solution :

Looks like the problem comes from the Autocomplete import.

try to install @mui/material and import it from it.

import Autocomplete from '@mui/material/Autocomplete';