so I have a <ColorPreview /> component that uses a theme value coming from the localStorage previously set by picking a color from a color picker component.

const ColorPreview = ({ colors }: any) => {
  const { theme, setTheme } = useThemeState();
  
  return (
    <>
      <div className='grid grid-cols-3 gap-4'>
        {Object.keys(theme).map((key: any, index) => {
          console.log('THEME', typeof theme[key as keyof ITheme]); //string
          return (
            <div
              key={key}
              className={clsx('overflow-hidden rounded-lg border-2', {
                ['h-62 col-span-2 row-span-2 w-52 ']: index === 0,
              })}
            >
              <div
                style={{
                  backgroundColor: `${theme[key as keyof ITheme]}`,
                }}
                className={clsx('h-28', {
                  ['!h-64']: index === 0,
                })}
              />

              <p
                className={clsx('justify-center p-2 text-base', {
                  ['!p-8']: index === 0,
                })}
              >
                {theme[key as keyof ITheme]}
              </p>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default React.memo(ColorPreview);

i'm setting the theme value using a ColorPicker component that maps a color palette into the theme object so we end up with a theme object with the new color codes as follows:

  theme: {
    primary: newHexValue //#002d89,
    secondary: newHexValue //#bfd4ff,
    tertiary: newHexValue //#80aaff,
  }

the problem is that the new theme value is correctly being set up in localStorage and its values and backgroundColor is correctly being displayed on each color pick from the color picker but after Refresh of the page, the backgroundColor is not being rendered empty even though the correct color code is still persisting in the ColorPreview component as shown below.

any help or guidance is highly appreciated...