Context issue

test.js

import React from 'react';

const CompContext = React.createContext()

const reducer = (state, action) => {
   switch(action.type){
     case 'ADD_CHILD':
         return {...state, total: state.total + 1 }
     case 'SOME_OTHER_TYPE':
         return {...state, otherState: `use ${state.total} to do some calc`}
     default:
       return state
   }
}
const initialState = {
   total: 0
  ...
  ..
}
const Parent = ({ children }) => {
  const [state, dispatch ] = React.useReducer(reducer, initialState)
  
  const context = {
    state, 
    dispatch
  }
  return (
    <CompContext.Provider>
    {children}
    </CompContext.Provider>
  )
}

const CompA = ({ children }) => {
  const { state } = React.useContext(CompContext)
  return (
    <>
      <h1>Total {state.total}</h1>
     {children}
    </>
   )
}

const CompB = ({ children }) => {
  const { state, dipatch } = React.useContext(CompContext)
  
  /* This trigger a re-render of the full component tree */
  /* since the global state is updated */
   React.useEffect(() => {
     dispatch({ type: 'ADD_CHILD'})
   }, [dispatch])
  
  return <div>{children}</div>
}

const App = () => {
  return (
    <Parent>
    <CompA>
      <div>Something</div>
    </CompA>
    <CompB>
      <h1>Component 1</h1>
      <h1>Component 2</h1>
      <h1>Component 3</h1>
    </CompB>
    </Parent>
  )
}