如何处理多个弹出窗口(material ui)

import React, { useState } from 'react';
import { Button, Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core';

const App = () => {
  const [openDialog1, setOpenDialog1] = useState(false);
  const [openDialog2, setOpenDialog2] = useState(false);

  const handleOpenDialog1 = () => {
    setOpenDialog1(true);
  };

  const handleCloseDialog1 = () => {
    setOpenDialog1(false);
  };

  const handleOpenDialog2 = () => {
    setOpenDialog2(true);
  };

  const handleCloseDialog2 = () => {
    setOpenDialog2(false);
  };

  return (
    <div>
      <Button onClick={handleOpenDialog1}>打开弹出窗口1</Button>
      <Button onClick={handleOpenDialog2}>打开弹出窗口2</Button>

      <Dialog open={openDialog1} onClose={handleCloseDialog1}>
        <DialogTitle>弹出窗口1</DialogTitle>
        <DialogContent>
          <p>这是弹出窗口1的内容。</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseDialog1}>关闭</Button>
        </DialogActions>
      </Dialog>

      <Dialog open={openDialog2} onClose={handleCloseDialog2}>
        <DialogTitle>弹出窗口2</DialogTitle>
        <DialogContent>
          <p>这是弹出窗口2的内容。</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseDialog2}>关闭</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default App;