Реактивный контекст перехватывает маршрутизатор: почему setState не работает в событии onpopstate при развертывании в Firebase?

Question

Я запускаю одностраничное приложение с маршрутизацией на стороне клиента. Он развернут на Firebase.

Код

Пользовательский маршрутизатор с реагирующими перехватчиками:

const RouterContext = React.createContext({})

const Router = ({ children }) => {
  const [path, setPath] = React.useState(document.location.pathname)

  React.useEffect(() => {
    const onPopState = () => {
      console.log('in pop') // this works
      setPath(document.location.pathname) // this raises an exception
    } 
    window.addEventListener('popstate', onPopState)
    return () => window.removeEventListener('popstate', onPopState)
  }, [])

  const push = nextPath => {
    if (nextPath !== path) {
      window.history.pushState(undefined, undefined, nextPath)
      setPath(nextPath)
      window.scrollTo(0, 0)
    }
  }

  return (
    <RouterContext.Provider value={{ path, push }}>
      {children}
    </RouterContext.Provider>
  )
}

Ожидаемое поведение

Я ожидаю setState оператор в функции onPopState в операторе useEffect для работы.

Фактическое поведение

Я получаю TypeError: n is not a function. Кажется, что функция setPath, заданная useState, не определена после всплывающего события.