Getting DOMTokenList error when I click the same theme twice. How do I resolve this?

Question

I am new to react development.

In this code I want to update different theme background upon clicking.

import { useEffect, useState } from "react";
import Logo from "../assets/logo.svg";

export function Header() {
  const [theme, setTheme] = useState(
    JSON.parse(localStorage.getItem("theme")) || "dark"
  );

  useEffect(() => {
    document.querySelector("html").removeAttribute("class");

    document.querySelector("html").classList.add(theme);

    localStorage.setItem("theme", JSON.stringify(theme));
  }, [theme]);

  function handleTheme(e) {
    setTheme(e.target.className);
  }

  return (
    <header>
      <div className="logo">
        <img src={Logo} alt="Taskmate Logo" />
        <span>Taskmate</span>
      </div>
      <div className="themeSelector" onClick={handleTheme}>
        <span
          className={theme === "light" ? "light activeTheme" : "light"}
        ></span>
        <span
          className={theme === "medium" ? "medium activeTheme" : "medium"}
        ></span>
        <span className={theme === "dark" ? "dark activeTheme" : "dark"}></span>
        <span
          className={
            theme === "gradientOne" ? "gradientOne activeTheme" : "gradientOne"
          }
        ></span>
        <span
          className={
            theme === "gradientTwo" ? "gradientTwo activeTheme" : "gradientTwo"
          }
        ></span>
        <span
          className={
            theme === "gradientThree"
              ? "gradientThree activeTheme"
              : "gradientThree"
          }
        ></span>
      </div>
    </header>
  );
}

Everything works fine if I click different theme everytime. But If I click on the same theme twice, I get an error like this

But if I set theme state directly on the span like this. It works.

<div className="themeSelector">
        <span
          onClick={() => setTheme("light")}
          className={theme === "light" ? "light activeTheme" : "light"}
        ></span>
        <span
          onClick={() => setTheme("medium")}
          className={theme === "medium" ? "medium activeTheme" : "medium"}
        ></span>
        <span
          onClick={() => setTheme("dark")}
          className={theme === "dark" ? "dark activeTheme" : "dark"}
        ></span>
        <span
          onClick={() => setTheme("gradientOne")}
          className={
            theme === "gradientOne" ? "gradientOne activeTheme" : "gradientOne"
          }
        ></span>
        <span
          onClick={() => setTheme("gradientTwo")}
          className={
            theme === "gradientTwo" ? "gradientTwo activeTheme" : "gradientTwo"
          }
        ></span>
        <span
          onClick={() => setTheme("gradientThree")}
          className={
            theme === "gradientThree"
              ? "gradientThree activeTheme"
              : "gradientThree"
          }
        ></span>
      </div>

I want to understand the cause of the error Why it works why not .I need assistance on this. And finally I want to handle all the click event in separate function like the first code, how can solve this to make it work?