I have a lot of Contexts in my react app but I don't want to create them manual.I want to. create a method thats get a function with set prop ( this method works like setter of useState hook ) and it returns a object and the method create a context and hook from the object. Example:

import createGlobalState from "path/to/createGlobalState";

const [CountProvider, useCount] = createGlobalState((set) => ({
  count: 0,
  increment(num) {
    set((count) => count + num);
  },
  decrementByOne() {
    set((count) => count - 1);
  },
  backToZero() {
    set(0);
  },
}));

export { CountProvider, useCount };

Hook Example:

import { useCount } from "./contexts/count";

function App() {

  const {count, increment, decrementByOne, backToZero} = useCount();

  return (
    <div>
      <h1>{count}</h1>
      <div>
        <button onClick={() => increment(5)}>
          Increment by 5
        </button>
        <button onClick={() => decrementByOne()}>
          Decrement by 1
        </button>
        <button onClick={() => backToZero()}>Back To Zero</button>
      </div>
    </div>
  );
}

export default App;

Provider Example:

import ReactDOM from "react-dom";
import App from "./App";
import { CountProvider } from "./contexts/count";

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

How I can implement createGlobalState method.