reactjs - NextJS の window.postMessage によるクロス ウィンドウ メッセージの取得が間違っている

Question

チェックアウト カードの支払いプロバイダーによって 3D セキュア認証が完了した後、リダイレクトページと通信する必要があります。親ウィンドウの場所を変更したくないので、このような設定をしています

/payment.tsx

これは、3DS Auth URL への新しいウィンドウを開くページです

export default function IndexPage() {
    useEffect(() => {
        //redirect will be replaced by 3d secure url
        // which after 3ds completes will redirect to /redirect
        const redirectWindow = window.open('/redirect')

        //I assume message posted by /redirect will be recieved here
        window.addEventListener('message', (event) => {
            //  if (typeof event.data === 'object' && 'key' in event.data) {
            if (typeof event.data === 'object' && 'key' in event.data && event.data.key === 'redirect') {
                console.log(event.data, 'Received From Redirect Window')
                redirectWindow?.close()
            }
        })
    }, [])

    return <div>Waiting for Redirect to send message</div>
}

次のページ/redirectは、成功または失敗後に 3DS が戻る場所です。

import { useEffect } from 'react'

export default () => {
    useEffect(() => {
        window.addEventListener('message', (event) => {
            console.log(event)
            event.source?.postMessage({ key: 'redirect', message: 'Hi' }, '*')
            //}
        })
    }, [])
    return <div>Transaction Successfull I should be closed by my Parent Window</div>
}

これの目的は、Checkout 3DS が完了してアプリケーションに戻ると、/payment にメッセージを送信して /redirect ウィンドウを閉じることです。このセットアップは実行可能なアプローチではない可能性があるため、フィードバックを歓迎します。しかし、現時点では /redirect から送信されたメッセージを取得できないか、ウィンドウを閉じることができません。

サンプルコードはCodeSandboxにあります