第二次单击后，我的react boostrap表中没有显示Modal

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

function MyComponent() {
  const [showModal, setShowModal] = useState(false);

  const handleClick = () => {
    setShowModal(true);
  };

  const handleClose = () => {
    setShowModal(false);
  };

  return (
    <div>
      <Button onClick={handleClick}>点击打开Modal</Button>

      <Modal show={showModal} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal标题</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          这里是Modal的内容
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            关闭
          </Button>
          <Button variant="primary" onClick={handleClose}>
            保存
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

export default MyComponent;

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  integrity="sha384-..."
  crossorigin="anonymous"
/>