React 关于组件重用的问题

Question

问题遇到的现象和发生背景

A(A中也引入了B组件),B组件。其中C组件通过传递props:modalBody,实现不同组件调用时能自定义modalbody内容,C组件render代码如下:

    render() {
        return (
            <div className="modal" id="modal" tabIndex="-1" >
                <div className={"modal-dialog"+(" "+this.props.size)}>
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            {this.props.modalBody}
                        </div>
                    </div>
                </div>
            </div>
        )
    }

我想要达到的结果

现在问题是若A,B中都要使用C组件,但是这样整个页面就会出现两个div#modal元素;那么我应该如何实现在A中import C之后,B中不用import C也能自定义modalbody呢?