Javascript EventListener не вызывает функцию

Question

У меня есть этот блок кода с React (Next. js), который должен определить, когда ключ logout создан / изменен в localStorage, а затем выйти из системы, автоматически перенаправив пользователя на /login.

Когда я тестирую, я вижу, что ключ успешно создан и удален, но функция syncLogout вообще не вызывается. Это как игнорирование. Но если я вручную создаю / изменяю logout в локальном хранилище (средства разработчика), код обнаруживается автоматически. Я не могу понять, почему это поведение?

Это код с кнопкой выхода из системы:

import { logout } from '../utils/Auth'

export const LogoutBtn = () => {

    return (
        <span className="nav-link" onClick={logout}>Logout</span>
    )
}

Это код с функциями (withAuthSync является HO C ):

export const logout = () => {

    window.localStorage.setItem('logout', Date.now())
}

export const withAuthSync = Component => {

    const Wrapper = props => {

        const { setUserData } = useContext(GlobalContext)

        /* I need this function to be called when the logout function is fired */
        /* Currently it only happens if I manually modify the logout key in LocalStorage */
        const syncLogout = event => { 

            if (event.key === 'logout') {

                setUserData({})

                console.log('logged out from storage!')

                Router.push('/login')
            }
        }

        useEffect(() => {

            window.addEventListener('storage', syncLogout)

            return () => {

                window.removeEventListener('storage', syncLogout)

                window.localStorage.removeItem('logout')
            }

        }, [])

        return <Component {...props} />
    }