Несколько контекста с использованием хуков

Question

У меня есть проблема, всегда обнуляющаяся при получении нескольких контекстов с использованием хуков.

app. js

import React, { useContext } from "react";
import "./styles.css";
import { AppContext } from "./AppContext";

export default function App() {
  const { layout } = useContext(AppContext);

  console.log("layout", layout);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Исходный код вы можете увидеть здесь
https://codesandbox.io/s/dawn-wood-pj33g