react-daum-postcode 에러 : Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

react-daum-postcode를 사용하여 위치 검색을 구현하던 중 다음과 같은 에러를 마주했다.

'노드'에서 'removeChild'를 실행하지 못했습니다. 제거할 노드가 이 노드의 하위 노드가 아닙니다. 라는 뜻이었고

// handleAddress함수
const handleAddress = (data) => {
  setFormData({ ...formData, location: data.address });
  setShowPostcode(false); // 우편번호 검색 창 닫기
};

// 주소 선택 모달
{showPostcode && (
  <DaumPostcode
    onComplete={handleAddress}
    />
)}

이 부분의 주소를 선택하고 닫히는 과정에서 문제가 생기는 듯 했다.

보통 모달을 만들 때 전체를 감싼 후 안에 콘텐츠를 넣었기 때문에 DaumPostCode를 감싸지 않아서 생긴 문제인가 해서

{showPostcode && (
  <Contents>
    <DaumPostcode
      onComplete={handleAddress}
      />
  </Contents>
)}

이렇게 감싸주었더니 해결되었다..~ 찾아보니 외부 라이브러리인 DaumPostcode가 직접 DOM을 제어하는 과정에서 일어난 충돌이 Contents로 감싸줌에 따라 컴포넌트가 분리되면서 해결된 듯 하다.