React Konva doesn't work with React 16.3 Context API

I am trying to use React 16.3 Context API based on render props with React Konva:

import React from "react";
import { Layer, Stage, Circle, Group, Line } from "react-konva";

const { Consumer, Provider } = React.createContext({ width: 0, height: 0 });

const ToolsLayer = () => (
  <Consumer>
    {({ height, width }) => (
      <Layer>
        <Group offsetY={-height} y={-42}>
          <Line
            points={[0, 0, width, 0, width, 42, 0, 42]}
            closed
            stroke="black"
          />
          <Circle radius={11} fill="red" stroke="black" x={21} y={21} />
          <Circle radius={11} fill="green" stroke="black" x={21 + 42} y={21} />
          <Group />
        </Group>
      </Layer>
    )}
  </Consumer>
);

export default function Canvas({
  width = window.innerWidth,
  height = window.innerHeight
}) {
  return (
    <Provider value={{ width, height }}>
      <Stage width={width} height={height}>
        <ToolsLayer />
      </Stage>
    </Provider>
  );
}

And I get runtime error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ToolsLayer`.

Reproducible demo: https://codesandbox.io/s/2o9j1r6l30

[lavrton]

Demo how to “bridge” contexts into react-konva tree:

import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Rect } from "react-konva";

const ThemeContext = React.createContext("red");

const ThemedRect = () => {
  const value = React.useContext(ThemeContext);
  return (
    <Rect x={20} y={50} width={100} height={100} fill={value} shadowBlur={10} />
  );
};

const Canvas = () => {
  return (
    <ThemeContext.Consumer>
      {value => (
        <Stage width={window.innerWidth} height={window.innerHeight}>
          <ThemeContext.Provider value={value}>
            <Layer>
              <ThemedRect />
            </Layer>
          </ThemeContext.Provider>
        </Stage>
      )}
    </ThemeContext.Consumer>
  );
};

class App extends Component {
  render() {
    return (
      <ThemeContext.Provider value="blue">
        <Canvas />
      </ThemeContext.Provider>
    );
  }
}

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/ykqw8r4r21

[maritaria]

The usage of context api should probably be an example on the offical docs site, there is no mention there of this problem/pitfall and I only found this due to some google searches (which first led me in other directions).