React useReducer not picking up new dispatched values from other component - reactjs

Question

I am trying to use a reducer to update a progress bar on a React/ Typescript app I am building. I am using the useReducer hook.
I have a progress bar that sits in the header which I am trying to get to 'listen' to the reducer state and rerender with the correct progress bar values that are given to it. At the moment though, the 'subscriber' component (so to speak) is not picking up the updated value. I know the value is being updated and recieved in the reducer as I can see it in their when I log out the action in this reducer.
Here is my code:
Reducer:
import ProgressBarTitleEnum from '../lib/enums/progressBarTitleEnum';
export const UPDATE_PROGRESS_BAR = 'updateProgressBar';
export interface IProgressBarState {
name: string;
value: number;
}
interface IAction {
type: string;
payload: IProgressBarState;
}
export const initialState: IProgressBarState = {
name: ProgressBarTitleEnum.INVESTOR_PROFILE,
value: 0,
};
export const reducer = (state = initialState, action: IAction): IProgressBarState => {
switch (action.type) {
case UPDATE_PROGRESS_BAR:
return {
...initialState,
name: action.payload.name,
value: action.payload.value,
};
default:
return state;
}
};
export function updateProgressBarAction(progressBarPayload: IProgressBarState): IAction {
return {
type: UPDATE_PROGRESS_BAR,
payload: progressBarPayload,
};
}
The component which is dispatching the action
import MainLayout from '../../components/layout/MainLayout';
import {
initialState as progressBarState,
reducer as progressBarReducer,
updateProgressBarAction,
} from '../../reducers/progressBarReducer';
import ProgressBarTitleEnum from '../../lib/enums/progressBarTitleEnum';
interface IStepsCompletedInterface {
investmentStyle: boolean;
investmentPeriod: boolean;
investmentRange: boolean;
investmentAmount: boolean;
}
export default function InvestorProfile(): JSX.Element {
const [progressBarStore, progressBarDispatch] = useReducer(progressBarReducer, progressBarState);
useEffect(() => {
progressBarDispatch(
updateProgressBarAction({
name: ProgressBarTitleEnum.INVESTOR_PROFILE,
value: 1,
}),
);
}, []);
And the progressBar component that is to listen to the state changes and render accordingly:
import { initialState as progressBarState, reducer as progressBarReducer } from '../../reducers/progressBarReducer';
// Can probably move it to react context
export default function ProgressBar(): JSX.Element {
const [progressBarStore, progressBarDispatch] = useReducer(progressBarReducer, progressBarState);
const isMobile = useMediaQuery({
query: `(max-device-width: ${mediaQueriesMap.get('mobile')}px)`,
});
console.log(progressBarStore);
const markUp = (
<div style={styles.container}>
{Array(4)
.fill(0)
.map((_, i) => {
let circleMarkup;
if (progressBarStore.value === i) {
circleMarkup = (
Can anyonewhy the updated state is not being picked up in the progress bar component? Also, do I need to create a local state variable to hold changes and combine with useEffect in the progress bar component to cause renders or does useReducer cause a rerender?
Thanks