const CounterContext = React.createContext({
  counter: 0,
  increment: () => {},
})

const App = () => {
  const [counter, setCounter] = React.useState(0)
  const increment = () => {
    setCounter(counter + 1)
  }

  const context = {
    counter,
    increment,
  }

  return (
    <CounterContext.Provider value={context}>
      // ...
    </CounterContext.Provider>
  )
}

const Thingy = () => (
  <CounterContext.Consumer>
    {(counter, increment) => (
      <>
        <div>Counter: {counter}</div>
        <button onClick={increment}>Incremet</button>
      </>
    )}
  </CounterContext.Consumer>
)