如何关闭在React + Redux应用程序中单击外部的模式窗口？

import React, { useState, useRef, useEffect } from 'react';

const Modal = () => {
  const [showModal, setShowModal] = useState(false);
  const modalRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (modalRef.current && !modalRef.current.contains(event.target)) {
        setShowModal(false);
      }
    };

    document.addEventListener('click', handleClickOutside);

    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open Modal</button>
      {showModal && (
        <div ref={modalRef}>
          {/* Modal content */}
          <h1>Modal Window</h1>
          <p>This is a modal window.</p>
        </div>
      )}
    </div>
  );
};

export default Modal;