https://codesandbox.io/s/context-usestate-split-provider-value-first-buqij

App.js

import React, { useState, createContext, useContext } from "react";

const SetContext = createContext();
const ValueContext = createContext();

const Provider = props => {
  const [value, set] = useState("initial");
  return (
    <ValueContext.Provider value={value}>
      <SetContext.Provider value={set} {...props} />
    </ValueContext.Provider>
  );
};

const Value = () => {
  const value = useContext(ValueContext);
  return <div>{value}</div>;
};

const SetValue = () => {
  const set = useContext(SetContext);
  return <button onClick={() => set(Date.now())}>Change</button>;
};

export default function App() {
  return (
    <Provider>
      <Value />
      <SetValue />
    </Provider>
  );
}