ReactJS 在延迟后显示模态

Question

我试图在延迟后显示 Bootstrap 模式，但只显示主页。请在下面查看我的代码（未检测到错误）。

App.js：

import { useEffect, useState } from "react";
import Home from "./pages/Home";
import Modal from 'react-bootstrap/Modal';

function MyVerticallyCenteredModal() {
    return (
      <Modal
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Modal heading
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Centered Modal</h4>
          <p>
            Some Text
          </p>
        </Modal.Body>
      </Modal>
    );
}

function App() {

    const [modalShow, setModalShow] = useState(false);

    useEffect(() => {
        const timeId = setTimeout(() => setModalShow(true), 3000)
    
        return () => clearTimeout(timeId)
    })

    return (
        <div className="App">
            <Home />
            {modalShow && (<MyVerticallyCenteredModal />)}
        </div>
    );
}

export default App;

你知道哪里出了问题吗？谢谢。