Overlay Component가 서로 의존성을 가질 때, 어떻게 해결할 수 있나요?

[e-tae-hyeon]

문제 상황 : ModalA와 ModalB가 서로를 열 수 있는 구조

• 즉, ModalA → ModalB → ModalA로 다시 이어지는 순환 참조 발생
• ModalA가 ModalB를 import
• ModalB도 다시 ModalA를 import

import { overlay } from "overlay-kit";
import React from "react";
import ModalB from "./ModalB";

function ModalA() {
  const openModalB = () => {
    overlay.open((props) => <ModalB {...props} />);
  };
  return <button onClick={openModalB}></button>;
}

---

해결 방법이ModalA,B가 각각 props로 open handler를 주입 받는다. 정도밖에 생각이 안나는데, 해당 방법은 부모 컴포넌트에 의존하게 되는 구조라 좋은 방법이라고 생각이 들진 않습니다..

더 좋은 해결 방법 추천 부탁드립니다.