ReactJS模态组件不会在单击时关闭

import React, { useState } from 'react';

const ModalComponent = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>打开模态框</button>

      {isModalOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>模态框内容</h2>
            <p>这是一个模态框示例。</p>
          </div>
          <div className="modal-background" onClick={closeModal}></div>
        </div>
      )}
    </div>
  );
};

export default ModalComponent;