AlreadyWidgetRenderedError: 이미 위젯이 렌더링되어 있습니다. 다시 렌더링하려면 cleanup 을 먼저 호출해주세요.

useEffect(() => {
    async function renderPaymentWidgets() {
      if (widgets == null) {
        return
      }

      try {
        console.log("clean up")
        console.log("렌더링 되어있는 위젯 ---->", renderUi)
        console.log("widgets ----->", widgets)

        renderUi?.destroy()

        await widgets.setAmount(amount)

        console.log("여기까지 오는지 1")

        // ------  결제 UI 렌더링 ------
        const newUi = await widgets.renderPaymentMethods({
          selector: "#payment-method",
          variantKey: "DEFAULT",
        })

        console.log("newUi ----> ", newUi)
        setRenderUi(newUi)

        console.log("여기까지 오는지 2")

        // ------  이용약관 UI 렌더링 ------
        await widgets.renderAgreement({
          selector: "#agreement",
          variantKey: "AGREEMENT",
        })
      } catch (error) {
        console.error(error)
      }

      setReady(true)
    }

    renderPaymentWidgets()

    return () => {
      renderUi?.destroy()
      setRenderUi(null)
    }
  }, [widgets])