Creé una aplicación de contador en React js usando la API de contexto para la gestión del estado global.

Pero el problema es que cuando hago clic en el botón de aumento y disminución, no se actualizan los valores globales.

Soy nuevo en React.js, brinde orientación sobre lo que está fallando aquí.

Archivo de contexto:

 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;

aplicación.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;

Aumentar el componente del botón:

 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;

Componente del botón de disminución:

 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;

Estructura de carpetas: