How to update Chakra UI theme.js file with Redux store value?

What do I want to do?

I want to change Chakra UI global theme.js file with redux store value which can be changed from the front end. Like from the front end a button to change all H1 tag colors to brand colors.

theme.js file

import { extendTheme } from "@chakra-ui/react";
import { store } from "./redux/store";
const getBgColor = (state) => {
  return state.theme.bgColor;
};
let test = "red";

const Helper = () => {
  const state = store.getState();
  const color = getBgColor(state);
  console.log("color", color);
  test = color;
  console.log(test);
};
store.subscribe(Helper);
console.log("test", test);

export const theme = extendTheme({
  colors: {
    brand: {
      100: `${test}`
    }
  }
});

Currently, this is taking value from the redux store for the first time but not changing as per store value change. Inside the Helper function, it is listening changes but theme.js file is not getting updated.

You can check this code sandbox I am testing on...

CodeSandBox link: https://codesandbox.io/s/upbeat-khayyam-rietmr?file=/src/theme.js

Thanks in advance!