Context Api Counter Application

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

const CounterContext = React.createContext();

function CounterProvider({ children }) {
const [count, setCount] = useState(0);

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

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

return (
<CounterContext.Provider value={{ count, increment, decrement }}>
{children}
</CounterContext.Provider>
);
}

function Counter() {
const { count, increment, decrement } = useContext(CounterContext);

return (
<div>
<h2>Counter: {count}</h2>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}

function App() {
return (
<CounterProvider>
<Counter />
</CounterProvider>
);
}

export default App;