react context provider compone

CountContext.tsx

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

const CountContext = createContext(999999999);
//default value if NO provider

//helper hook
export const useCountContext = () => useContext(CountContext);

//helper provider
export const CountContextProvider = (props) => {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(c => c + 1);
    }

    const decrement = () => {
        setCount(c => c - 1);
    }

    return (<CountContext.Provider value={{ count, setCount }}>
        {props.children}
    </CountContext.Provider>)
}

index.tsx

root.render(
  <React.StrictMode>
  <CountContextProvider>
      <App />
  </CountContextProvider>
  </React.StrictMode>
);

SomeComponent1.tsx

import { useCountContext } from "./CountContext.tsx";

export const SomeComponent1 = () => {
    const { count, setCount } = useCountContext();

    return <div>SomeComponent1 <button onClick={() => setCount(c => c + 1)}>++ {count}</button></div>
}