我最近在显示错误消息时遇到了麻烦，我试图在出现错误时打开一个模态，但我在操作上遇到了麻烦，我试图将其作为错误边界，但没有成功，目前，我在主页元素中有模态，但不幸的是，handleOpen不起作用，如果有人可以格式化代码，使其起作用，并向我解释为什么它没有摆在首位，这将是美妙的，我的进步作为一个开发人员
代码：

// modal defining
  const [open, setOpen] = useState(false);

  // modal closing
  const handleClose = () => {
    setOpen(false);
  }

  // modal opening
  const handleOpen = () => {
    setOpen(true);
  }

  //file data being saved
  const [fileData, setFileData] = useState<any>();

  // first checks if the columns have names, then checks if they are containing id and name
  const handleFileData = (data: Array<any>) => {
    for (let index = 0; index < data[0].length; index++) {
      if (data[0][index] == null) { return (HOMEPAGE) }
    }
    for (let index = 0; index < data[0].length; index++) {
      if (data[0][index].includes("id"), data[0][index].includes("name")) { setFileData(data); }
    }
  }

  // Routing Element
  const isData = () => {
    if (fileData !== undefined) {
      return <MainPage Data={fileData}></MainPage>
    }
    else {
      return (HOMEPAGE);
    }
  };

  // error message
  const ModalComp = (
    <Modal
      open={open}
      onClose={handleClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box className='Modal'>
        <Typography id="modal-modal-title" variant="h6" component="h2">
         problem  </Typography>
        <Typography id="modal-modal-description" sx={{ mt: 2 }}>
          alert
          <br /> <br />
        alert </Typography>
      </Box>
    </Modal>
  );

  // Home Page Element
  const HOMEPAGE = (
    <div className="App">
      <h1 className='H1'>Interface</h1>
      <InputPart handleFileData={handleFileData}></InputPart>
      {ModalComp}
    </div>
  );

  //Browser Router.
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={HOMEPAGE}></Route>
        <Route path="/main" element={isData()}></Route>
      </Routes>
    </BrowserRouter>
  );
} 

export default App;

字符串
我无法找到一种方法来打开模态时，有一个错误，如果你能告诉在哪里，请让我知道，提前感谢。