I have created a counter app in React js using context api for global state management .

But the problem is when i am clicking increase and decrease button it is not updating global values .

I am new to react , please provide guidance what is going wrong here .

ContextFile :

import {createContext,useState} from 'react';

export const DataContext = createContext({
    data:0,
    increase : () => {},
    decrease : () => {}
});

function DataContextProvider(props){
    const [data,setData] = useState();

    const increase = () => {
        setData(data + 1);
    }

    const decrease = () => {
        setData(data - 1);
    }

    return(
        <DataContext.Provider value={{data,increase,decrease}}>
            {props.children}
        </DataContext.Provider>
    );

};

export default DataContextProvider;

App.js :

import React,{useContext} from 'react';
import {DataContext} from './Context/dataContext';
import DataContextProvider from './Context/dataContext';
import IncreaseBtn from './Component/Increase';
import DecreaseBtn from './Component/Decrease';

const App = () => {
  const {data} = useContext(DataContext);
  
  return(
    <>
    <DataContextProvider>
      {data}
      <br/>
      <br/>
      <IncreaseBtn />
      <br/>
      <br/>
      <DecreaseBtn />
    </DataContextProvider>
    </>
  )
}

export default App;

Increase Button Component :

import React,{useContext} from 'react';
import {DataContext} from '../Context/dataContext';

const IncreaseBtn = () => {
    const {increase} = useContext(DataContext);

    return(
        <>
            <button onClick={increase}> Increase </button>
        </>
    )
}

export default IncreaseBtn;

Decrease Button Component :

import React,{useContext} from 'react';
import {DataContext} from '../Context/dataContext';

const DecreaseBtn = () => {
    const {decrease} = useContext(DataContext);

    return(
        <>
            <button onClick={decrease}> Decrease </button>
        </>
    )
}

export default DecreaseBtn;

Folder Structure :