Элемент расположен абсолютно внутри диалогового окна "Материал материала" React

Question

У меня есть компонент Dialog, где у меня есть кнопка (нижний правый угол), которая показывает другой div со списком предметов. Проблема, с которой я сталкиваюсь, заключается в том, что список отображается внутри компонента Dialog и обрезается. Я установил position: absolute, z-index и установил position: relative для родителя, но он не работает. Вот как это выглядит. Любые полезные советы, я был бы признателен. 1) Прежде чем нажать кнопку, чтобы отобразить список 2) После нажатия кнопки. Выделены css свойства для элемента списка

и код для компонента Dialog:

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import { ProjectTreeWindow } from "../index";

const useStyles = makeStyles(theme => ({
  addTaskButton: {
    marginTop: 10
  },
  dialog: {
    width: "40%",
    maxHeight: 435
  },
  closeButton: {
    position: "absolute",
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500]
  },
  controlsWrapper: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
  }
}));

const AddQuickTaskDialog = props => {
  const classes = useStyles(props);
  const { open, close } = props;
  const [quickTaskDescription, setQuickTaskDescription] = useState("");
  const [textInputRef, setTextInputRef] = useState(null);
  const handleChangeQuickTaskDescription = event => {
    setQuickTaskDescription(event.target.value);
  };

  const handleAddQuickTaskSubmit = () => {
    alert("Quick task submitted");
    close(textInputRef);
  };

  return (
    <Dialog
      data-testid="add-task-quick"
      classes={{
        paper: classes.dialog
      }}
      maxWidth="lg"
      open={open}
      keepMounted
      onClose={() => {
        close(textInputRef);
      }}
      aria-labelledby="quick-task-dialog"
      aria-describedby="quick-task-dialog-description"
    >
      <DialogTitle id="quick-task-dialog-title">
        <Typography variant="h6">Quick Add Task</Typography>
        {close ? (
          <IconButton
            aria-label="close"
            className={classes.closeButton}
            onClick={() => {
              close(textInputRef);
            }}
          >
            <CloseIcon />
          </IconButton>
        ) : null}
      </DialogTitle>
      <DialogContent>
        <div className={classes.wrapper}>
          <OutlinedInput
            onChange={handleChangeQuickTaskDescription}
            inputRef={input => {
              setTextInputRef(input);
              return input && input.focus();
            }}
            fullWidth
            //   className={showAddTaskInput ? classes.show : classes.hide}
            placeholder="e.g. Take the dog out for a walk"
            inputProps={{ "aria-label": "add task" }}
          />
          <div className={classes.controlsWrapper}>
            <Button
              className={classes.addTaskButton}
              disabled={quickTaskDescription.length === 0}
              data-testId="quick-add-task-submit"
              // onClick={handleAddTaskSubmit}
              color="primary"
              onClick={handleAddQuickTaskSubmit}
            >
              Add Task
            </Button>
            <ProjectTreeWindow />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};
export default AddQuickTaskDialog;

и для компонента List:

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import ListAltTwoToneIcon from "@material-ui/icons/ListAltTwoTone";
import IconButton from "@material-ui/core/IconButton";
import { CustomizedToolTip } from "../index";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import DoneTwoToneIcon from "@material-ui/icons/DoneTwoTone";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import FiberManualRecordTwoToneIcon from "@material-ui/icons/FiberManualRecordTwoTone";
import { useProjectsValue, useSelectedProjectValue } from "../../context";

const useStyles = makeStyles(theme => ({
  root: {
    position: "absolute",
    zIndex: 9999,
    top: 200,
    left: 0,
    display: "flex",
    flexDirection: "column",
    "&:hover $child": {
      visibility: "visible"
    }
  },
  wrapper: {
    position: "relative !important"
  },
  selected: {
    "& $child": {
      visibility: "visible !important"
    }
  },
  hidden: {
    visibility: "hidden"
  },
  listItemIcon: {
    minWidth: 30
  }
}));

const ProjectTreeWindowList = props => {
  const [textInputRef, setTextInputRef] = useState(null);
  const [typeProject, setTypedProject] = useState("");
  const classes = useStyles(props);
  const { projects } = useProjectsValue();

  return (
    <div className={classes.root}>
      <OutlinedInput
        // onChange={handleChangeQuickTaskDescription}
        inputRef={input => {
          setTextInputRef(input);
          return input && input.focus();
        }}
        placeholder="Type a project"
        inputProps={{ "aria-label": "select project" }}
      />
      <List>
        {projects &&
          projects.map((project, index) => (
            <ListItem
              onClick={() => {
                alert("move selected project to input");
              }}
              //   selected={active === project.projectId}
              button
              // classes={{
              //   root: classes.root,
              //   selected: classes.selected
              // }}
            >
              <ListItemIcon
                className={classes.listItemIcon}
                style={{ color: project.color }}
              >
                <FiberManualRecordTwoToneIcon />
              </ListItemIcon>
              <ListItemText primary={project.name} />
              <ListItemIcon
                className={`${classes.listItemIcon} ${classes.hidden}`}
              >
                <DoneTwoToneIcon />
              </ListItemIcon>
            </ListItem>
          ))}
      </List>
    </div>
  );
};

const ProjectTreeWindow = props => {
  const classes = useStyles(props);
  const [showProjectTreeWindow, setShowProjectTreeWindow] = useState(false);

  const handleShowProjectWindow = () => {
    setShowProjectTreeWindow(!showProjectTreeWindow);
  };
  const handleCloseProjectWindow = () => {
    setShowProjectTreeWindow(false);
  };

  return (
    <div className={classes.wrapper}>
      <CustomizedToolTip title="Select a project">
        <IconButton onClick={handleShowProjectWindow} aria-label="add-project">
          <ListAltTwoToneIcon />
        </IconButton>
      </CustomizedToolTip>
      {showProjectTreeWindow ? <ProjectTreeWindowList /> : null}
    </div>
  );
};
export default ProjectTreeWindow;