dispatch is not updating reducer

Question

I'm using useReducer and useContext as a flux store and i'm boggled on why i'm unable to update the stores state. Here is a sample of the code I'm working with.

reducer and initial state

export const localState = {
 modal_open: false,
 date: null
}

export const reducer = (state , action) => {
switch (action.type) {
  case "OPEN_MODAL":
    return {
      ...state,
      modal_open: true
      
    }
    case "CLOSE_MODAL":
    return {
      ...state,
      modal_open: false
    }
    case "SET_DATE":
    return {
      ...state,
      date: action.payload
    }
  default:
    return state;
}

};

context constructor and component wrapping import React from "react";

  const LocalWebSiteContext= React.createContext();


    const WebsiteDetails = () => {
     const [state, dispatch] = React.useReducer(reducer, localState)
     const [averPositions, setAverPositions] = React.useState()
     const classes = useStyles();
     let match = useRouteMatch("/app/websites/:id/:slug");
     let { id } = useParams();
     const context = useContext(UserContext);
     const history = useHistory();

       //testing
       const { localContext } = context

  
       const websiteData = localContext.websites.find((el, idx) => {

       if(el.website_id === id){
         return el;
        }
      });
  
      const userAndWebsiteData = {
       ...websiteData,
       ...localContext.user
     }

     if(!userAndWebsiteData){
       console.log('Not a valid website');
       history.push('/app/websites/');
       // return;
     }




  return (
     <>
      <localWebSiteContext.Provider value={{state, dispatch}}>
      { userAndWebsiteData && 
      <Page className={classes.root} title="Analytics Dashboard">
      {/* { JSON.stringify(userAndWebsiteData) }
      { id } */}
        <Header websiteData={userAndWebsiteData} />
        <Grid className={classes.container} container spacing={3}>
          <Grid item xs={12}>
            <Overview websiteData={userAndWebsiteData} />
          </Grid>
          <Grid item lg={8} xl={9} xs={12}>
            <CustomModal />
            <FinancialStats websiteData={userAndWebsiteData}/>
          </Grid>
          <Grid item lg={4} xl={3} xs={12}>
            {/* { 
          JSON.stringify(userAndWebsiteData.positionRangesData)} 
          */}
          <Top5To30 positionData={userAndWebsiteData.positionRangesData 
           ? userAndWebsiteData.positionRangesData : {} } />
          range bar chart
          <EarningsSegmentation />
          </Grid>
          <Grid item lg={12} xs={12}>
            <KeywordsList /> 
          </Grid>
          <Grid item lg={4} xs={12}>
            <CustomerActivity />
          </Grid> 
        </Grid>
      </Page>
      }
    </localWebSiteContext.Provider>
  </>
  );
};

Component where i'm dispatching the payload to change date

 const FinancialStats = props => {
 const {state, dispatch} = React.useContext(localWebSiteContext)
const { websiteData, className, handleAverData, ...rest } = props;
const [dateId, setDateId] = React.useState(null)

const [disabled, setDisabled] = useState([]);
const handleModalOpen = () => {
const averPositions = websiteData.dailyAveragePositions;
if (averPositions){
  const dateNum = parseInt(averPositions[0].d)
  dispatch({type: 'OPEN_MODAL', payload: dateNum})
  }
}

      return (
        <span
          key={dataKey}
          className="legend-item"
          style={style}
        >
          <Surface width={10} height={10}>
            <Symbols cx={5} cy={5} type="circle" size={50} fill={color} />
            {active && (
              <Symbols
                cx={5}
                cy={5}
                type="circle"
                size={25}
                fill={'#FFF'}
              />
            )}
          </Surface>
          <span>{dataKey}</span>
        </span>
      );
    })}
  </div>
);

};

The expected behavior is when I dispatch({type: 'SET_DATE', payload: dateNum) it will reflect that all other components subscribed to the useContext hook. But i cannot for the life of me get it to update from null... I'm able to switch the bool values. Even when I tried to set it locally in a useState hook it's still null? Maybe has something to do with renders? Thanks in advance!!