Почему переключение темы срабатывает со второго раза при первой загрузке страницы?

Question

[MrLumuss]

Есть компонент, основанный на Material UI, который отвечает за переключение темы. При первой загрузке страницы он срабатывает со второго клика, далее работает с первого, как и положено. В чем проблема может быть?

Код компонента:

import { DarkMode, WbSunny } from "@mui/icons-material";
import {
  IconButton, Stack, Switch, useTheme,
} from "@mui/material";

const ThemeSwitcherComponent = ({
  isCompact, color, disabled, size,
}) => {
  const { isDark, toggleTheme } = useTheme();

  if (isCompact) {
    return (
      <IconButton
        color={color || "inherit"}
        disabled={disabled}
        size={size}
        onClick={toggleTheme}
      >
        {isDark ? (
          <WbSunny fontSize={size} />
        ) : (
          <DarkMode fontSize={size} />
        )}
      </IconButton>
    );
  }

  return (
    <Stack alignItems="center" flexDirection="row">
      <WbSunny color={color || "inherit"} fontSize={size} />
      <Switch
        checked={isDark}
        color={color || "default"}
        disabled={disabled}
        size={size}
        onChange={toggleTheme}
      />
      <DarkMode color={color || "inherit"} fontSize={size} />
    </Stack>
  );
};

export default ThemeSwitcherComponent;