我需要在React中构建一个从父组件打开并从模态组件本身关闭的模态组件。
我在父组件中设置状态，并将其作为属性传递给子模态组件：

const [modalIsOpen, setModalIsOpen] = useState(false)

  const handleOpenFromParent = () => {
    setModalIsOpen(true)
  }

  const handleCloseFromChild = () => {
    setModalIsOpen(false)
  }

以及

<div
        className={`${styles.w_30} p-3 d-flex justify-content-center align-items-center flex-column`}
        onClick={handleOpenFromParent}
      >
        <ModalPaymentMethods
          playerNickname={nickname}
          paymentDescription={paymentMethodsVisa}
          paymentLogo={<Icon icon='mdi:credit-card-outline' color={'#84c3d3'} style={{ fontSize: '150px' }} />}
          depositTimes={11}
          depositAmount={'€18.6k'}
          depositTimesLastSixMonths={9}
          depositQuantityLastSixMonths={'€12.7k'}
          paymentMethodNumber={4301165517084005}
          expiryMonth={'07'}
          expiryYear={'2017'}
          holderName={`${name + ' ' + lastName}`}
          billingAddress={address}
          modalIsOpen={modalIsOpen}
          handleCloseFromChild={handleCloseFromChild}
        />
      </div>

从父组件打开模态组件没有问题，但是一旦从子组件打开模态组件，我就无法关闭它。
我传递了一个回调函数handleCloseFromChild作为一个prop来将模态上的可见性状态设置回false，但是它不起作用，modalIsOpen始终保持true，并且从不会从回调函数中设置为false：

const ModalPaymentMethods = ({
  playerNickname,
  paymentDescription,
  paymentLogo,
  depositTimes,
  depositAmount,
  depositTimesLastSixMonths,
  depositQuantityLastSixMonths,
  paymentMethodNumber,
  expiryMonth,
  expiryYear,
  holderName,
  billingAddress,
  modalIsOpen,
  handleCloseFromChild
}) => {
  console.log(modalIsOpen)
  console.log(handleCloseFromChild)

  return (
    <div className={styles.ModalPaymentMethods}>
      <Modal
        open={modalIsOpen}
        onClose={handleCloseFromChild}
        aria-labelledby='modal-modal-title'
        aria-describedby='modal-modal-description'
      >
       test
      </Modal>
     </div>
   )