[Proyecto] Apartado en el LocalStorage

Así quedó el localstorage en un primer intento que no me funcionaba:

import React, { useState, useEffect } from "react";

import Header from "./Components/Header";
import Container from "./Components/Container";
import GlobalStyle from "./GlobalStyle";
import { ThemeProvider } from "styled-components";
import { temaClaro, temaOscuro } from './Components/UI/temas';
import { BtnTema } from "./Components/UI";
import SwitcherTema from "./Components/SwitcherTema";

function App() {
  // Estado para el tema
  const [tema, setTema] = useState(true);

  // Almacena el estado del tema en el localStorage cuando cambia
  useEffect(() => {
    localStorage.setItem("tema", tema ? "claro" : "oscuro");
  }, [tema]);

  // Recupera el estado del tema del localStorage al cargar la página
  useEffect(() => {
    const temaGuardado = localStorage.getItem("tema");
    setTema(temaGuardado === "claro");
  }, []);

  const toggleTema = () => {
    setTema((tema) => !tema);
  };

  return (
    <ThemeProvider theme={tema ? temaClaro : temaOscuro}>
      <GlobalStyle />
      <BtnTema onClick={toggleTema}>
        <SwitcherTema tema={tema} />
      </BtnTema>
      <Header />
      <Container />
    </ThemeProvider>
  );
}

export default App;

Una modificación que tampoco funcionaba:

// ...

useEffect(() => {
  const temaGuardado = localStorage.getItem("tema");
  if (temaGuardado === "claro") {
    setTema(true);
  } else if (temaGuardado === "oscuro") {
    setTema(false);
  }
}, []);

// ...

Y ya que esta alteración ya quedó funcionando:

function App() {
  const [tema, setTema] = useState(() => {
    const temaGuardado = localStorage.getItem("tema");
    return temaGuardado ? JSON.parse(temaGuardado) : true; 
 });

  useEffect(() => {
    localStorage.setItem("tema", JSON.stringify(tema));
  }, [tema]);

  const toggleTema = () => {
    setTema((prevState) => !prevState);
  };

// Resto del código...
}

Recalco que no sé nada de localstorage, pero buscando e investigando me topaba con estos códigos y los adaptaba y viendo que no funcionaba, pedía ayuda y encontré con la solución, aunque sigo sin comprender el porque no funcionaba con los anteriores código y veo que con este último que me funcionó veo que en el usestate se le puede meter una función, también está el tema del json y sus métodos, en fin les comparto esta experiencia que tuve al hacer el localstogare del cambio de tema jeje