我试图从另一个组件打开一个模态。这在我的父组件中：

import { Button, Modal } from 'react-bootstrap';
import React, { useState } from 'react';
import './App.css';
import ModalB from './ModalB';

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  const handleCloseA = () => setShowA(false);
  const handleShowA = () => setShowA(true);

  const handleShowB = ({ handleShow }) => {
    setShowB(handleShow);
  };

  return (
    <div className="App">
      <header className="App-header">

        <Button variant="primary" onClick={handleShowA}>Open A</Button>
        <Button variant="primary" onClick={handleShowB}>Open B</Button>

        <Modal show={showA} onHide={handleCloseA}>
          <Modal.Header closeButton>
            <Modal.Title>In Modal A</Modal.Title>
          </Modal.Header>
        </Modal>

        <ModalB isModalVisible={showB}></ModalB>

      </header>
    </div>
  );
}

export default App;

和模态b组件：

import { Button, Modal } from 'react-bootstrap';
import React, { useState } from 'react';
import { propTypes } from 'react-bootstrap/esm/Image';

const ModalB = (props) => {
    const [showB, setShowB] = useState(false);
    const handleCloseB = () => setShowB(false);
    const handleShowB = () => setShowB(true);

    return (
        <div>
            <Modal show={props.isModalVisible} onHide={handleCloseB}>
                <Modal.Header closeButton>
                    <Modal.Title>In Modal B</Modal.Title>
                </Modal.Header>
            </Modal>
        </div>
    );

}

export default ModalB;

问题是显示主部件的b。虽然显示modala很简单，但我不明白如何告诉b从主组件显示。
谢谢你的帮助。