如何关闭Modal的React方式？

import React, { useState } from 'react';

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

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

  return (
    <div>
      <button onClick={() => setShowModal(true)}>打开Modal</button>
      {showModal && (
        <div className="modal">
          <div className="modal-content">
            <button onClick={closeModal}>关闭Modal</button>
            {/* Modal内容 */}
          </div>
        </div>
      )}
    </div>
  );
}

import React, { useRef } from 'react';

function Modal() {
  const modalRef = useRef(null);

  const closeModal = () => {
    modalRef.current.style.display = 'none';
  };

  return (
    <div className="modal" ref={modalRef}>
      <div className="modal-content">
        <button onClick={closeModal}>关闭Modal</button>
        {/* Modal内容 */}
      </div>
    </div>
  );
}