Getting Error an error message for Collapse component on Material UI-CodePudding

I am trying to build a hamburger menu using Material UI List on Next.js similar to Nested List example on Material UI docs. However, I am keep getting error if I use "collapse" on my code. If I remove collapse then the other parts of the code works fine.

Can anyone tell me what am I doing wrong?

screenshot of an error message

I am trying to build similar to this

import * as React from "react";
import { useState } from "react";
import IconButton from "@mui/material/IconButton";
import ListSubheader from "@mui/material/ListSubheader";
import { Drawer } from "@mui/material";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MenuIcon from "@mui/icons-material/Menu";
import { ExpandLess, ExpandMore } from "@mui/icons-material";
import Collapse from "@mui/material";

const myMenu = [
{
title: "about",
},
{
title: "services",
submenu: [{ title: "Digital Marketing" }, { title: "Promotion" }],
},
{
title: "blog",
},
{
title: "contact",
},
];

const ResponsiveAppBar = () => {
const [openDrawer, setOpenDrawer] = useState(false);
const [open, setOpen] = React.useState(false);

 const handleClick = () => {
  setOpen(!open);
 };

 return (
   <React.Fragment>
     <Drawer
      anchor="right"
      open={openDrawer}
       onClose={() => setOpenDrawer(false)}
      >
       <List
        sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
        component="nav"
         aria-labelledby="nested-list-subheader"
         subheader={
          <ListSubheader component="div" id="nested-list-subheader">
          Navigation
           </ListSubheader>
         }
        >
         {myMenu.map((page, index) =>
          page.submenu ? (
           <div>
            <ListItemButton key={index} onClick={handleClick}>
              <ListItemText>{page.title}</ListItemText>
              {open ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>

            <Collapse in={open} timeout="auto" unmountOnExit>
              <List component="div" disablePadding>
                {page.submenu.map((sub, index) => {
                  return (
                    <ListItemButton key={index}>
                      <ListItem key={index}>
                        <ListItemText>{sub.title}</ListItemText>
                      </ListItem>
                    </ListItemButton>
                  );
                })}
              </List>
            </Collapse>
          </div>
        ) : (
          <ListItemButton key={index}>
            <ListItemIcon>
              <ListItemText>{page.title}</ListItemText>
            </ListItemIcon>
          </ListItemButton>
        )
      )}
    </List>
  </Drawer>
  <IconButton
    sx={{ color: "black", marginLeft: "auto" }}
    onClick={() => setOpenDrawer(!openDrawer)}
  >
    <MenuIcon color="white" />
  </IconButton>
</React.Fragment>
);
};

export default ResponsiveAppBar;

CodePudding user response：

The culprit is an incorrect import of Collapse:

import Collapse from "@mui/material";

Since Collapse is a named import, you must import it in one of these two ways:

import { Collapse } from "@mui/material";

// Alternatively
import Collapse from "@mui/material/Collapse";