Client side and server side rendering issue with mui 5 and nextjs?

Question

I am using mui for my next js project. I find the documentation and follow a example from mui for my next js project. Everything is well. Now I am enable dark mode and light mode in my project. I set color mode in browser localstorage for storing user choosed theme.

But when I am trying to add some css with the condition of color mode by fetching from localstorage it not applied.

Emaple--

Here is one component-- //Here isDark return true or false from localstorage stored mode

<Box onClick={toggleDarkMode} className={classes.Switch}>
     <ButtonBase sx={{ left: `${isDark ? "0" : "50%"}` }}>
       {isDark &&
          <Icon icon="ic:sharp-dark-mode" />
       }
       {!isDark &&
          <Icon icon="ic:round-light-mode" />
       }
     </ButtonBase>
</Box>

Here I am writing one css that when isDark is true then left: 50% . It work find when I refrsh the page then the css apply to the default.. But here still isDark is true.

I can understand that this problem is occured for server side rending issue. Then anyone can solve that error say how can I apply that particular css in client side. Thank you?