Получение кросс-оконных сообщений от window.postMessage в NextJS неправильно

Question

Мне нужно связаться со страницей перенаправления после завершения авторизации 3D secure поставщиком платежных карт Checkout Card. Поскольку я не хочу менять расположение родительского окна, у меня есть такая настройка

/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>
}

Следующая страница / перенаправление - это то место, куда 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>
}

Это делается для того, чтобы закрыть окно /redirect, отправив сообщение / payment после завершения работы Checkout 3DS и вернувшись в приложение. Такой подход может оказаться невозможным, поэтому отзывы приветствуются. Но на данный момент я не могу получить какое-либо сообщение, отправленное из / перенаправить, или, таким образом, не могу закрыть окно.

Пример кода можно найти в CodeSandbox