I have a function with two parameters that returns an object(palette). The first parameter is the index for an object in palette and the second parameter controls whether to return the light or dark object.

const Theme = (index:String, DarkMode:Boolean) => {

const palette = {

background:{
light,
dark,
},

custom:{
light,
dark,
},

}
 
return(palette[index][DarkMode]);
}

Then in my react component I use this function to style my element.

const [darkMode, setDarkMode] = useState(false); // state
const bg = Theme("background",darkMode); // function

// then in my component style

backgroundColor:`${bg.background}`,

Then I have a button that toggle my darkmode state so that my theme function returns the light object instead of dark and vice versa, but the problem is the background-color of my component does not change even when the state does.

So my question is: "How do I use React.useMemo to recall my function and re-render my component when the state changes?".