如何连续关闭2个模态视图控制器？

import React, { useState } from 'react';

function App() {
  const [modal1Open, setModal1Open] = useState(false);
  const [modal2Open, setModal2Open] = useState(false);

  const closeModal1 = () => {
    setModal1Open(false);
    setModal2Open(true);
  };

  const closeModal2 = () => {
    setModal2Open(false);
  };

  return (
    <div className="App">
     <button onClick={() => setModal1Open(true)}>打开模态视图1</button>
     <Modal1 open={modal1Open} onClose={closeModal1} />
     <Modal2 open={modal2Open} onClose={closeModal2} />
    </div>
  );
}

function Modal1({ open, onClose }) {
  return (
    <div className={`modal ${open ? 'open' : 'closed'}`}>
      <h2>模态视图1</h2>
     <button onClick={onClose}>关闭模态视图1</button>
    </div>
  );
}

function Modal2({ open, onClose }) {
  return (
    <div className={`modal ${open ? 'open' : 'closed'}`}>
      <h2>模态视图2</h2>
     <button onClick={onClose}>关闭模态视图2</button>
    </div>
  );
}

export default App;