React Redux Persist: Dispatch an action after REHYDRATE

I'm new at using Redux and its ecosystem. I'm trying to create a simple dark-mode integrated with Tailwindcss. Everything is ok with redux and redux-persist, the only thing is that I need to dispatch an action to update the HTML classist after persist/REHYDRATE action.

I tried to add an extra reducer that listen persist/REHYDRATE:

extraReducers: (builder) => {
     builder.addCase(REHYDRATE, (state) => {
     console.debug(state.isDarkMode) // show FALSE but value is updated to TRUE
   });
}

settingsSlicer.ts:

import { createSlice } from '@reduxjs/toolkit'
import { REHYDRATE } from "redux-persist";

export const settingsSlice = createSlice({
  name: 'settings',
  initialState: {
    isDarkMode: false
  },
  reducers: {
    toggleDarkMode: (state) => {
      state.isDarkMode = !state.isDarkMode
      state.isDarkMode
        ? document.documentElement.classList.add('dark')
        : document.documentElement.classList.remove('dark')
    },
  },
  extraReducers: (builder) => {
    builder.addCase(REHYDRATE, (state) => {
      console.debug(state.isDarkMode) // show FALSE but value is updated to TRUE
    });
  }
})

export const { toggleDarkMode } = settingsSlice.actions

export default settingsSlice.reducer

The problem can be solved by checking isDarkMode value in the _app.tsx, but I want to know if there is a better method to do this.

Example of how problem can be easily solved:

const App = ({ Component, pageProps }: AppProps) => {
  const isDarkMode = useAppSelector((state) => state.settings.isDarkMode)
  
  useEffect(() => {
    if(isDarkMode) document.documentElement.classList.add('dark')
    else document.documentElement.classList.remove('dark')
  })
  
  return (
    <PersistGate
      loading={<p>Loading</p>}
      persistor={store.__persistor}>
      <Component {...pageProps} />
    </PersistGate>
  )
}