Поставщик контекста React 16, возвращающий неопределенное значение при рендеринге

Question

Я использую новый контекстный API React (v16.x).

Я сделал простое тестовое приложение, чтобы убедиться в моем понимании этого:

const MyContext = React.createContext();

const Child = () => (
  <MyContext.Consumer>
    {value => value}
  </MyContext.Consumer>
)

const Parent = () => (
  <MyContext.Provider value={"Working"}>
    <Child/>
  </MyContext.Provider>
)

Это прекрасно работает, дажес промежуточными компонентами между <Parent> и <Child>.

Однако нижеуказанный компонент выдает следующую ошибку: "Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс/ function (для составных компонентов), но получил: undefined " (примечание: я использую библиотеку material-ui )

let NavigationPanel = (props) => (
  <DisabledContext.Provider value={props.disabled}>
    <InstructionsContext.Provider value={props.onOpenInstructions}>
      <Hidden mdUp><DrawerNavigationPanel data={props.data}/></Hidden>
      <Hidden smDown><StaticNavigationPanel data={props.data}/></Hidden>
    </InstructionsContext.Provider>
  </DisabledContext.Provider>
)

Почему это может происходить?